Laravel Vue组件不显示存储数据

我正在建立一个琐事制造者。我目前正在编辑一个问题。名为EditQAForm的编辑组件获取该特定问题的问题和答案，并填充其各自的VueX存储的表单

我目前在本页的答案部分遇到问题。当安装EditQAForm时，它调用fetchQuestionAnswers，它检索该特定问题的所有答案。这样做是正确的，但是当我尝试在页面上显示任何答案时，它会说表单是空的，尽管我在Vue开发工具中看到它不是空的

请注意，我删除了与此无关的内容。因此，假设所有被调用的方法都存在

以下是EditQAForm的安装版本：

mounted() {

            //gets the params from the url
            this.routeParams = this.$route.params;

            //gets the answers that belong to this question
            this.fetchQuestionAnswers(this.routeParams.question_id);

            //not important for this problem
            //get the question that needs to be edited
            this.fetchQuestion(this.routeParams.question_id);

        },

computed: {
            ...mapGetters('question', ['formQuestionRoundID', 'questions', 'questionFields']),
            ...mapGetters('answer', ['answerFields', 'answers']),

            //Questions
            questionForm: {
                get() {
                    return this.questionFields;
                },
            },

            //Answers
            answerForm: {
                get() {
                    return this.answerFields;
                },
            },
        }

我如何在EditQAForm的计算属性中调用它：

mounted() {

            //gets the params from the url
            this.routeParams = this.$route.params;

            //gets the answers that belong to this question
            this.fetchQuestionAnswers(this.routeParams.question_id);

            //not important for this problem
            //get the question that needs to be edited
            this.fetchQuestion(this.routeParams.question_id);

        },

computed: {
            ...mapGetters('question', ['formQuestionRoundID', 'questions', 'questionFields']),
            ...mapGetters('answer', ['answerFields', 'answers']),

            //Questions
            questionForm: {
                get() {
                    return this.questionFields;
                },
            },

            //Answers
            answerForm: {
                get() {
                    return this.answerFields;
                },
            },
        }

这里是答案商店

function initialState() {
    return {
        answers: [],
        answer: null,
        form: [
            {
                id: '',
                title: '',
                question_id: '',
                round_id: '',
                correct: false,
            },
            {
                id: '',
                title: '',
                question_id: '',
                round_id: '',
                correct: false,
            },
            {
                id: '',
                title: '',
                question_id: '',
                round_id: '',
                correct: false,
            },
        ]
    }
}

const getters = {
    answers(state){
        return state.answers;
    },
    answerFields(state){
        return state.form;
    },
    loading(state){
        return state.loading;
    },
};

const actions = {

    fetchQuestionAnswers({ commit, state }, question_id) {
        console.log("Form outside axios:");
        console.log(state.form);
        commit('setLoading', true);
        axios.get('/api/question/' + question_id + '/answers')
            .then(response => {
                commit('SET_ANSWERS_FORM', response.data);
                commit('setLoading', false);
            }).catch( error => {
            console.log(error.response);
        });
    },

const mutations = {

    SET_ANSWERS_FORM(state, answers){

        for(let $i = 0; $i < answers.length; $i++)
        {
            state.form[$i] = {
                id: answers[$i].id,
                title: answers[$i].title,
                question_id: answers[$i].question_id,
                round_id: answers[$i].round_id,
                correct: answers[$i].correct,
            }
        }
        // state.answers = answers;
    },
    UPDATE_TITLE(state, payload){
        state.form[payload.order].title = payload.title;
    },
    UPDATE_QUESTION_ID(state,payload){
        state.form[payload.order].question_id = payload.questionID;
    },
};

我尝试输出的内容：

    <div>

        <h3 class="pb-3">Is first answer's title not empty?: {{!(answerForm[1].title === '')}}</h3>
        <h3 class="pb-3">{{answerForm[0].title }}</h3>

        <h3>{{answerForm}}</h3>

    </div>

屏幕上显示的内容以及devtools告诉我的内容都在answerForm数组中：

---

我以非常相似的方式实现了问题部分。唯一的区别是表单不是问题存储中的数组，而且它工作得很好。我做错了什么？

我认为问题在于：

state.form[$i]={ 如果您使用索引来更新数组，它将不会触发反应系统，并且您将获得呈现组件的旧版本。请参阅

有多种方法可以解决此问题。您可以使用Vue.set，也可以创建一个全新的数组

我还不完全清楚，为什么您首先要进行所有复制，而不仅仅是使用state.form=answers，这也会解决问题