Question

我正在使用Vuex存储中的嵌套对象/数组渲染表。当我向表中添加一行时，尽管该行对象已添加到正确的数组（已在Vue Dev-Tools中验证），但DOM不会更新以显示其他行。

我已经为此奋斗了几个小时，以为我会寻求帮助。我已经阅读了Vue文档中的反应性警告和更多内容，但无济于事。请帮忙。

我的Vuex商店中的对象正在从中呈现表格...

propertyRating: {
        location: [
            { name: null, inferior: true, slightlyInferior: true, similar: true, slightlySuperior: true, superior: true },
        ],
        site: [
            { name: null, inferior: false, slightlyInferior: false, similar: false, slightlySuperior: false, superior: false },
        ],
        additionalFeatures: [
            { name: null, inferior: true, slightlyInferior: false, similar: true, slightlySuperior: false, superior: true },
        ],
}

我正在使用嵌套的v-for加载表，其中propertyRating的每个键代表标题行，相应的数组值代表要在标题下方呈现的各个行的列表。

<div v-for="(section, sectionName) in sections" :key="sectionName">
   <div v-for="(row, index) in [section]" :key="sectionName+index" class="w-row"></div>
</div>

状态像这样映射到组件...

computed: {
...mapState({
  location: state => state.evaluation.propertyRating.location,
  site: state => state.evaluation.propertyRating.site,
  additionalFeatures: state =>
    state.evaluation.propertyRating.additionalFeatures,
  sections: state => state.evaluation.propertyRating
  })
}

最后，将突变添加到表部分的空行...

ADD_PROPERTY_RATING_ROW(state, sectionName) {
   Vue.set(state.propertyRating[sectionName], state.propertyRating[sectionName].length, { name: null, inferior: true, slightlyInferior: false, similar: true, slightlySuperior: false, superior: true });
},

尽管对象已添加到相应的section数组（已在Vue Dev Tools中验证），但DOM不会更新以显示新行。任何帮助深表感谢。我正在做我所知道的所有事情，而且似乎无法使它正常工作。

使用Vue / Vuex的反应式嵌套V-For

0 个答案: