Vue组件不显示商店数据

Posted 2023-02-23

技术标签:

【中文标题】Vue组件不显示商店数据【英文标题】：Vue Component not showing store data 【发布时间】：2019-11-19 08:48:13 【问题描述】：

我正在建立一个琐事制作器。我目前正在编辑页面上处理一个问题。名为 EditQAForm 的编辑组件获取该特定问题的问题和答案，并填充每个相应的 VueX 商店的表单。

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

（请注意我删除了与此无关的内容。因此假设您看到的所有方法都存在）

这是为 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);

        ,

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

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 数组中：

我以非常相似的方式实现了问题部分。唯一的区别是表单不是问题存储中的数组，但除此之外它工作正常。我做错了什么？

【问题讨论】：

【参考方案1】：

我认为问题出在这里：