python - Django-Vue 错误“无法挂载应用程序：挂载目标选择器返回 null。”

Question

感谢您调查我的问题，我是 Django 和 Vue 的初学者，您对此的帮助将非常有帮助。我正在开发一个职位门户，并在 Django 中创建了职位搜索功能作为后端，我在我的 Django 项目中有一个名为job的应用程序。浏览器 Js 控制台给出了这个错误Failed to mount app: mount target selector returned null.对于这个应用程序，我有一个添加工作视图，雇主通过它添加工作。为此，我使用 Vue 进行验证，如果雇主帐户未输入任何非空字段，则会显示任何错误。所以这不是它应该看起来的样子，意外的结果快照，所以你可以看到它不应该给我[[error]]，company_size而是The company size is missing根据下面给出的 Vue AddJobApp。另外如果要添加#在 Vue-AddJobApp 的 mount-function-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 %}

我在工作应用程序中的 views.py 文件

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})

标签： pythondjangovue.js