Python “Django Vue错误”；装载应用程序失败：装载目标选择器返回null；

感谢您调查我的问题，我是Django和Vue的初学者。您的帮助将非常有用。我正在一个求职门户网站上工作，并在Django中创建了求职搜索功能作为后端。我在Django项目中有一个名为Job的应用程序。浏览器Js控制台出现此错误

装载应用程序失败：装载目标选择器返回null。

对于此应用程序，我有一个添加作业视图，雇主通过该视图添加作业。为此，我使用Vue进行验证，如果雇主帐户未输入任何非空字段，则显示任何错误。所以这不是它应该看起来的样子，所以正如你所看到的，它不应该给我

[[error]]

和

公司大小

，而是

根据下面给出的Vue AddJobApp，公司大小缺失

。另外，如果要在Vue AddJobApp中的mount函数createapp中添加#，则页面将完全消失（空白页面）。我做错了什么

adding # in AddJob.mount() function is making the page go blank a

添加作业模板

{% extends 'core/base.html' %}


{% block content %}

        <div id="add-job-app">

            <h1 class="title"> Add Job</h1>
            <form action="." method="POST" v-on:submit="validateForm">
                {% csrf_token %}

                {% if form.errors %}
                    {% for error in form.errors %}
                        <div class="notification is-danger">
                            {{ error }}
                        </div>
                    {% endfor %}
                {% endif %}
                    
                <div class="notification is-danger" v-if ="error.length" >
                    <p v-for="error in errors" >
                        [[ error ]]
                    </p>
                </div>
                        
                <div class="field">
                    <label for="">Title</label>
                    
                    <div class="control">
                        <input class="input" type="text" name="title" id="id_title" v-model= "title">
                    </div>

                </div>

                <div class="field">
                    <label for="">Short description</label>
                    
                    <div class="control">
                        <textarea name="short_description" id="id_short_description" class="textarea" v-model= "short_description" ></textarea>
                    </div>

                </div>

                <div class="field">
                    <label for="">Long description</label>
                    
                    <div class="control">
                        <textarea name="long_description" id="id_long_description" class="textarea" v-model= "long_description" ></textarea>
                    </div>

                </div>

                <div class="field">
                    <label for="">Company name</label>
                    
                    <div class="control">
                        <input class="input" type="text" name="company_name" id="id_company_name"  v-model= "company_name"  >
                    </div>

                </div>

                <div class="field">
                    <label for="">Company address</label>
                    
                    <div class="control">
                        <input class="input" type="text" name="company_address" id="id_company_address" v-model= "company_address">
                    </div>

                </div>

                <div class="field">
                    <label for="">Company zipcode</label>
                    
                    <div class="control">
                        <input class="input" type="text" name="company_zipcode" id="id_company_zipcode" v-model= "company_zipcode">
                    </div>

                </div>

                <div class="field">
                    <label for="">Company place</label>
                    
                    <div class="control">
                        <input class="input" type="text" name="company_place" id="id_company_place" v-model= "company_place">
                    </div>

                </div>

                <div class="field">
                    <label for="">Company Country</label>
                    
                    <div class="control">
                        <input class="input" type="text" name="company_country" id="id_company_country" v-model= "company_country">
                    </div>

                </div>

                <div class="field">
                    <label for="">Company Size</label>
                    
                    <div class="control">
                        <div class="select">
                            <select name="company_size"  v-model = "company_size">
                                <option value="">Choose Size</option>
                                <option value="size_1_9">1-9</option>
                                <option value="size_10_49">10-49</option>
                                <option value="size_50_99">50-99</option>
                                <option value="size_100">100+</option>
                            </select>

                        </div>

                    </div>

                </div>



                <div class="field">
                    <div class="control">
                        <button class="button is-success">Submit</button>
                    </div>
                </div>
            </form>
        </div>
{% endblock %}

{% block scripts %}
        <script >
            const AddJobApp = {
                data() {
                    return {
                        title:'',
                        company_name:'',
                        short_description:'',
                        company_size:'',
                        errors:[]
                    }
                },
                delimiters:['[[',']]'],
                methods :{
                    validateForm(e){
                        this.errors = []

                        if( this.title ===''){
                            this.errors.push('The title field is missing')
                        }
                        
                        if( this.short_description   ===''){
                            this.errors.push('The short description field is missing')
                        }
                        
                        if( this.company_name  ===''){
                            this.errors.push('The company name field is missing')
                        }
                        
                        if( this.company_size  ===''){
                            this.errors.push('The company size is missing')
                        }

                        if(this.errors.length){
                           e.preventDefault()
                           return false
                        }else{
                            return true
                        }
                    }
                }
            }
            Vue.createApp(AddJobApp).mount('add-job-app');
        </script>
{% endblock %}

---

应该是

在块内容之后的确切位置，而不是classYeah！它起作用了@Dan它似乎不适用于我在同一个求职应用程序的其他视图中提到的类似类型的错误，当我对其进行了重大编辑时，您是否可以再次查看该问题您删除了

挂载中的
。使用较小的代码，直到识别问题或收到错误消息
from apps.job.forms import AddJobForm, ApplicationForm
from django.shortcuts import redirect, render
from .models import Job
from django.contrib.auth.decorators import login_required
from apps.notification.utilities import create_notification

def job_detail(request,job_id):
    job = Job.objects.get(pk=job_id)
    return render(request, 'job/job_detail.html',{'job':job})

def search(request):
    return render(request,'job/search.html')

@login_required
def apply_for_job(request,job_id):
    job = Job.objects.get(pk=job_id)

    if request.method=='POST':
        form = ApplicationForm(request.POST)

        if form.is_valid():
            application = form.save(commit=False)
            application.job = job
            application.created_by = request.user
            application.save()
            create_notification(request, job.created_by  ,'application',extra_id=application.id)
            return redirect('dashboard')
    else:
        form = ApplicationForm()

    return render(request,'job/apply_for_job.html',{'form':form,'job':job})



@login_required
def add_job(request):
    if request.method=='POST':
        form = AddJobForm(request.POST)

        if form.is_valid():
            job = form.save(commit=False)
            job.created_by  = request.user
            job.save()
            return redirect('dashboard')
    else:
        form = AddJobForm()

    return render(request,'job/add_job.html',{'form':form})