Django model object with foreign key post

Question

I want to add an article which has a foreign key conference attribute via my frontend in vuejs

here is my code for adding an article in vuejs

    <template>
    <div class="page-add-article">
        <div class="columns is-multiline">
            <div class="column is-12">
                <h1 class="title">Add article</h1>
            </div>
            <div class="column is-12">
                <h2 class="is-size-5 mb-4">Conference</h2>
                <div class="select">
                    <select name="conference" v-model="article.conferences">
                        <option value="">- Select conference -</option>
                        <option 
                            v-for="conference in conferences"
                            v-bind:key="conference.id"
                            v-bind:value="conference"
                        >
                            {{ conference.titleConf }}
                        </option>
                    </select>
                </div>
            </div>
            <div class="column is-12">
                <div class="field">
                    <label>Auteur</label>

                    <div class="control">
                        <input type="title" class="input" v-model="article.auteur">
                    </div>
                </div>
                <div class="field">
                    <label>resume</label>
                    <div class="control">
                        <textarea type="text" class="input" v-model="article.resume"></textarea>
                    </div>
                </div>
                <div class="field">
                    <label>motcles</label>
                    <div class="control">
                        <input type="title" class="input" v-model="article.motcles">
                    </div>
                </div>
            </div>
        </div>
        <div class="column is-12">
            <button class="button is-success" @click="submitForm">Save</button>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { toast } from 'bulma-toast'
export default {
    name: 'AddArticle',
    data() {
        return {
            article: {
                conference: '',
                auteur: '', 
                resume: '',
                motcles: '',
            },
            conferences: []
        }
    },
    async mounted() {
        await this.getConferences()
    },
    methods: {
        getConferences() {
            axios
                .get('/api/v1/conferences/')
                .then(response => {
                    this.conferences = response.data
                })
                .catch(error => {
                    console.log(JSON.stringify(error))
                })
        },

        async submitForm() {
            this.$store.commit('setIsLoading', true)
                const article = {
                    auteur: article.auteur,
                    resume: article.resume,
                    motcles: article.motcles,
                    conference: article.conferences

                }
           
            await axios
                .post('/api/v1/articles/', this.article)
                .then(response => {
                    toast({
                        message: 'The articles was added',
                        type: 'is-success',
                        dismissible: true,
                        pauseOnHover: true,
                        duration: 2000,
                        position: 'bottom-right',
                    })
                    this.$router.push('/dashboard/conferences')
                })
                .catch(error => {
                    console.log(JSON.stringify(error))
                })
        }
    }
}
</script>

<style lang="scss">
    .select, .select select {
        width: 100%;
    }
</style> 

my article template in django

class Article(models.Model):
    #user = models.ForeignKey(User,on_delete=models.CASCADE,null=True)
    #Auteur =models.ForeignKey(Auteur,on_delete=models.CASCADE)
    conferences = models.ForeignKey(Conference,on_delete=models.CASCADE)
    title =models.CharField(max_length=50)
    Auteur =models.CharField(max_length=50)
    resume =models.TextField()
    motcles =models.TextField()
    create_by = models.ForeignKey(User,related_name='articles',on_delete=models.CASCADE)
    fichier = models.FileField(upload_to='uploads',blank=True,null=True)
    
    def __str__(self):
            return self.title

views.py of Article app :

class ArticleViewSet(viewsets.ModelViewSet):
    serializer_class = ArticleSerializer
    queryset = Article.objects.all()
    def get_queryset(self):
        return self.queryset.filter(create_by=self.request.user)
    def perform_update(self,serializer):
        obj = self.get_object() 
        serializer.save(created_by=self.request.user)
    def perform_create(self, serializer):
        serializer.save(create_by=self.request.user)

the template of Conference app :

class Conference(models.Model):
    titleConf=models.CharField(max_length=50)
    desc=models.TextField()
    date = models.DateField()
    ville= models.CharField(max_length=50,choices=villes,default='Alger')
    created_by = models.ForeignKey(User,related_name='conferences',on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)
    modified_at = models.DateTimeField(auto_now=True)
    #image = models.ImageField(upload_to='uploads',default='uploads/confer.jpeg',blank=True, null=True)
    class Meta:
        ordering = ('-created_at',)
    def __str__(self):
        return self.titleConf

views.py of Conference:

class ConferenceViewSet(viewsets.ModelViewSet):
    serializer_class = ConferenceSerializer
    queryset = Conference.objects.all()
    def get_queryset(self):
        return self.queryset.filter(created_by=self.request.user)

    def perform_update(self,serializer):
        obj = self.get_object() 
        serializer.save(created_by=self.request.user)
       
    def perform_create(self, serializer):
        serializer.save(created_by=self.request.user)

I can't add article do you know what the problem is? here is the error displayed on console:

AddArticle.vue?fee6:83 Uncaught (in promise) ReferenceError: Cannot access 'article' before initialization
    at Proxy.submitForm (AddArticle.vue?fee6:83:1)
    at onClick._cache.<computed>._cache.<computed> (AddArticle.vue?fee6:45:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?2725:366:1)

Answer 1

You missed this when referencing article from data. Without it, you are referencing the local variable article at the moment of its creation:

const article = {
                    auteur: this.article.auteur,
                    resume: this.article.resume,
                    motcles: this.article.motcles,
                    conference: this.article.conferences

                }