Vuejs 组件并不总是显示获取的数据

Question

组件在 laravel 视图中，由于某种原因，选择标签中的数据没有显示..有时。听起来很奇怪，它有时会显示数据，有时却不会……控制台或视图中没有任何错误。 这是组件代码：

<template>
<div class="row">
    <div class="col-md-12 text-center" v-if="!loaded">
        <br>
        <i class="fas fa-spinner fa-2x fa-pulse"></i>
    </div>
    <div class="col-md-12" v-else>
        <div class="row">
            <div class="col-md-6" >
                <label for="subjects">{{ trans('strings.choseSubject') }}</label>
                <select name="subjects" id="subjects" class="form-control selectpicker filter-input"
                        data-live-search="true" data-style="filter-input" @change="addSubject">
                    <option value="">{{ trans('strings.choseSubject') }}</option>
                    <optgroup v-for="category in subjects" :label="category.name" :data-catID="category.id">
                        <option :value="subject.id" v-for="subject in category.subjects">{{ subject.name }}</option>
                    </optgroup>
                </select>
            </div>
            <div class="col-md-6">
                <div class="other-subject-form d-none">
                    <label for="otherSubject">{{ trans('strings.choseSubject') }}</label>
                    <input type="text" class="form-control filter-input" id="otherSubject" name="otherSubject">
                </div>
            </div>
            <div class="col-md-12">
                <br>
                <hr>
                <br>
            </div>
            <div class="col-md-12">
                <div class="btn-group mb-2" v-for="subject in user_subjects">
                    <button type="button" class="btn btn-danger" :data-subjectID="subject.id" @click="deleteSubject" style="font-weight: bold">X</button>
                    <button type="button" class="btn btn-blue" disabled style="opacity: 1 !important;">{{ subject.name }}</button>
                    &nbsp;
                    &nbsp;
                </div>
            </div>
        </div>
    </div>
</div>

组件功能：

  <script>
export default {
    data() {
        return {
            loaded: false,
            subjects: [],
            user_subjects: []
        }
    },
    methods: {
        getSubjects: function () {
            axios.get('/t/get/subjects').then(function (response) {
                console.log(response);
                response.data.categories.map((value) => {
                    const category = {
                        id: value.id,
                        name: value.name,
                        subjects: value.subjects
                    };
                this.subjects.push(category);
                });
            }.bind(this));
            this.loaded = true;
        },
        getUserSubjects: function () {
            axios.get('/t/get/teacher/subjects').then(function (response) {
                this.user_subjects = [];
                response.data.subjects.map((value) => {
                    const subject = {
                        id: value.id,
                        real_id: value.subject.id,
                        name: value.subject.name
                    };
                $('#subjects').find('option[value="'+value.subject.id+'"]').remove();
                this.user_subjects.push(subject);
                });
                $("#subjects").selectpicker("refresh");
            }.bind(this));
            this.loaded = true;
        },
        addSubject: function (e) {
            var id = e.target.value;
            if(this.user_subjects.length<10)
            {
            axios.post('/t/subject/add', {
                subject_id: id,
            }).then(function (response) {
                this.getUserSubjects();
            }.bind(this));
        }
        else
        alert("You reached your maximum subjects! You can delete the subjects you don't need by pressing on the X button beside each subject");
        },
        deleteSubject: function (e) {
            var id = e.target.getAttribute('data-subjectID');

            axios.post('/t/subject/delete', {
                subject_id: id,
            }).then(function (response) {
                // var alasql = require('alasql');
                // this.user_subjects = alasql('DELETE FROM ? WHERE `id` = '+ id , [this.user_subjects]);
                this.user_subjects = this.user_subjects.filter(function (obj){
                    return obj.id != id
                });


                $('#subjects optgroup[data-catID="'+response.data.category_id+'"]').append($('<option>', {value:response.data.id, text: $('html').attr('lang') === 'ar' ? response.data.name_ar : response.data.name}));
                $("#subjects").selectpicker("refresh");
            }.bind(this));
        }
    },
    computed: {},
    created() {
        Vue.prototype.trans = string => _.get(window.i18n, string);
        console.log(this.subject);
        this.getSubjects();
        this.getUserSubjects();
        if(this.subjects == null){
            this.$forceUpdate();
        }
    }
}

在刀片视图中，它是这样的：

<br>
                    <subjects-selector></subjects-selector>
                    <br> <br>

知道为什么会这样吗？它呈现结果，但它就像一个 50/50 的机会....

Answer 1

我遇到过类似的问题，它是由 v-for 元素上的重复（或缺失）键引起的。您可以通过简单地添加 :key 属性来修复代码：

<optgroup v-for="category in subjects" :key="category.id" :label="category.name" :data-catID="category.id">
    <option :value="subject.id" v-for="subject in category.subjects" :key="subject.id">{{ subject.name }}</option>
</optgroup>