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

HongHaiyang
  • 104

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

用的是 vux 的一个 checklist 组件,
这是我的界面
clipboard.png

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

   <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 工具中进行查看,这是我点击返回上一题之后的样子,可以看出这个选项是没有被选上的,
clipboard.png

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

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

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

我也试着把代码写在 mounted 中
clipboard.png
但这下载连点击调试工具都没用了。。

还请各位给点意见,谢谢

回复
阅读 2.6k
1 个回答

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

你可以watch arrayIndex 的变化

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

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

宣传栏