Vue计算属性不好更新怎么办？ :key来解决！-一一网

问题是这样的：

我的 <Btn> 组件中显隐样式 checked 的存在与否，取决于 vuex 中的数据，然而当用户是第一次进入时，由于 vuex 中还没有数据，导致 <Btn> 组件的 computed 计算属性监听不到，之后无论用户怎么操作，始终返回false。

解决方案：

既然是因为组件第一次渲染时 vuex 中无数据导致无法实现真正的监听，那么我们可以在用户第一次操作，vuex 有数据后，强制 <Btn> 组件渲染一次。而强制渲染的手段自然可以使用 :key 的方式，即给所有的 Btn 组件统一绑定一个 key，在用户操作后更新一次这个 key，因为 :key 的特性，该组件就会强制重新渲染一次。

// <Btn>组件
export default {
  name: "Btn",
  props: {
    type: String,
    btn: Object,
    qsNumber: Number
  },
  methods: {
    clickHandler(){
      this.$router.push(this.btn.link)
    }
  },
  computed:{
    checked(){
      return this.$store.state.qsData[this.qsNumber] && this.$store.state.qsData[this.qsNumber].answer.indexOf(this.btn.text) !== -1
    },
  },
};
复制代码

// <Body>组件
<template>
    <div
    v-for="(item, index) in content.btn"
    :key="index">
      <Btn 
        :key="btnKey"
        :btn="item" 
        :type="content.componentsType.mobile" 
        :qsNumber="qsNumber"
        @click.native="clickHandler(item)" 
      />
    </div>
</template>
<script>
import Btn from '@/components/Btn.vue'
export default {
  name: "QuestionBody",
  props: {
    qsNumber: Number,
    nextPage: String,
    navigateType: String,
    content: Object
  },
  components: {
    Btn
  },
  data() {
    return {
      qsData: {
        input: '',
        answer: []
      },
      btnKey: 0
    }
  },
  methods: {
    clickHandler(e){
      // 处理业务数据。。。
      
      this.saveData()
    },
    saveData(){
      // 初始化
      this.qsData.answer = []

      this.checkedBtn.forEach(item => {
        this.qsData.answer.push(item.text)
      });

      // 保存数据
      this.$store.commit({
        type: 'changeQsData',
        id: this.qsNumber,
        data: this.qsData
      })

      // 强制更新btn组件
      if(this.btnKey === 0){this.btnKey = 1}
    },
  }
</script>
复制代码