Блог

Спасибо, что изучили мою проблему, я новичок в Django и надеюсь, что ваша помощь в этом будет чрезвычайно полезной. Я работаю над порталом вакансий и создал функцию поиска работы в Django в качестве бэкэнда для того же, у меня есть приложение под названием job в моем проекте Django. Консоль Js браузера выдает эту ошибку Failed to mount app: mount target selector returned null. Для этого приложения У меня есть представление добавления задания, с помощью которого работодатель добавляет задания. Для этого я использую Vue для проверки и отображения любых ошибок, если какие-либо ненулевые поля не введены учетной записью работодателя. Так что это не так, как это должно было выглядеть, неожиданный снимок результатов, как вы можете видеть, он не должен был давать мне [[error]] , а company_size вместо The company size is missing этого в соответствии с Vue AddJobApp, приведенным ниже. Также, если добавить # в mount-function-createapp в Vue-AddJobApp, страница полностью исчезнет (пустая страница). что я здесь делаю не так?

 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 файл внутри приложения job

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