用v-if时报错说变量未定义

Question

我要弄一个收藏按钮，通过click事件来控制collected的值，从而通过v-if根据collected的值来显示不同的图片

//伪代码

<div class="option collect" @click="collect()">
  <img src="../assets/images/favor_fill.png" v-if="collected">
  <img src="../assets/images/favor2.png" v-else>
  <span>收藏</span>
</div>

date () {
  return {
    collected:false
  }
},
methods: {
  collect:function() {
    this.collected = !this.collected
  }
}

当我执行上述代码时会有如下报错：

就是说我collected没有定义，可是我明明在data里面定义了啊。如果我在created里面定义collected就不会报错：

created() {
      this.collected = false
    }

所以我猜v-if在起作用时data里面的变量其实还没有开始定义，所以v-if根本不知道collected是什么。不知道我的猜想正不正确。还有不管collected的值怎么改变显示的都是v-else那张图，是不是因为v-if只判断一次collected的值？要实现收藏按钮的功能这代码要怎么改呢

Answer 1

data, date?

Answer 2