chrome 浏览器 vue devtools 扩展上点击组件页面上就能显示效果，不点击就没效果

Question

最近做的这个 vue 项目，有一个很困扰我的地方，特地来发帖请教。

用的是 vux 的一个 checklist 组件，
这是我的界面

上一题下一题都是这样的选择列表，我的需求是返回上一题后，上一题的列表还是刚才我选择的记录

   <checklist :ref="questionnaireSubject.subjects[arrayIndex].subject.id+'-checklist'" :title="questionnaireSubject.subjects[arrayIndex].subject.typeName" :max="checkMax"
           v-model="checkListResult"    :options="checkListData" @on-change="answerChange" class="marginBottom"></checklist>

这个 checklist 的组件 v-model 绑定的一个checkListResult，我的做法是每点击下一题时就把当前这个 checklist 选择的数据保存到 vuex 中，同时这个组件的 mounted 都去 vuex 中查一下，有保存记录的话就把该记录查出来（我通过数组下标来区分是哪一题的选择记录）赋给这个 checklistResult，以下是相关代码：

      getcheckListResultFromVuex(){
        if(this.$store.state.questionnaire.questionnaireAnswer[this.arrayIndex].answerForVuex.length>0){
          this.checkListResult=this.$store.state.questionnaire.questionnaireAnswer[this.arrayIndex].answerForVuex
          return this.$store.state.questionnaire.questionnaireAnswer[this.arrayIndex].answerForVuex
        }else{
          return []
        }
      }

但是实际结果总是不成功，我在 chrome 浏览器的 vue devtools 工具中进行查看，这是我点击返回上一题之后的样子，可以看出这个选项是没有被选上的，

但是当我点击这个调试插件中显示的那个 FlCheckList 后，这个组件就按照我从 vuex 中取出的记录给勾上了：

这里面的getcheckListResultFromVuex()是一个计算属性，他返回了结果给 v-model 绑定的 checkListResult。

我不明白，为什么我只是在浏览器调试插件上点了一下，这个点一下的操作不就是让我可以查看该组件当前的一些状态吗，难道我写的代码通过这个点击给调用了？ 调试工具不应该有这种作用啊。。。

我也试着把代码写在 mounted 中

但这下载连点击调试工具都没用了。。

还请各位给点意见，谢谢

Answer 1

不要在计算属性里写逻辑或者是改变数据
不要在计算属性里写逻辑或者是改变数据
不要在计算属性里写逻辑或者是改变数据

你可以watch arrayIndex 的变化

watch:{
    'arrayIndex':function(){    this.checkListResult=this.$store.state.questionnaire.questionnaireAnswer[this.arrayIndex].answerForVuex
    }
}

当你点击vue devtools 才会出效果是因为这时会获取该组件的data和计算属性