Vue中判断data内author等于'Gel'的console.log逻辑失效求助

嘿，我来帮你排查下为啥你的if语句没生效～ 先拆解下你的代码逻辑：你在mounted钩子中调用了shiiit()方法，但此时author的初始值是空字符串''，所以条件this.author === 'Gel'不成立，自然不会打印haha。而当你通过下拉框选择Gel时，author的值确实会更新，但这个时候你没有重新触发shiiit()方法，所以代码根本没机会再次判断条件。

给你几个可行的解决思路：

1. 用Vue的watch监听author的变化（推荐方案） #

这是Vue响应式系统的最佳实践，自动监听author的变化，一旦值变成Gel就执行打印操作：

data(){
  return {
    author: '',
    authors: ['Gel','shit']
  }
},
mounted(){
  // 初始化时如果需要检查，可以在这里调用一次
  this.checkAuthor()
},
methods: {
  checkAuthor(){
    if(this.author === 'Gel'){
      // eslint-disable-next-line no-console
      console.log('haha')
    }
  }
},
watch: {
  author(newVal){
    this.checkAuthor()
    // 或者直接把逻辑写在这里：
    // if(newVal === 'Gel') console.log('haha')
  }
}

2. 给下拉框绑定change事件 #

每次用户选择下拉选项时，手动触发检查方法：

修改模板部分：

<select v-model="author" @change="checkAuthor">
  <option v-for="author in authors" :key="author">
    {{ author }}
  </option>
</select>

然后在methods中保留你的检查方法（可以改名更语义化）：

methods: {
  checkAuthor(){
    if(this.author === 'Gel'){
      // eslint-disable-next-line no-console
      console.log('haha')
    }
  }
}

另外注意你的v-for里的key：因为authors是字符串数组，直接用author作为key就可以，不用author.id（数组元素是字符串，没有id属性）。

3. 初始化时设置默认值（可选） #

如果希望页面加载时，若author初始值是Gel就触发打印，可以把data里的author设为'Gel'，然后在mounted里调用检查方法：

data(){
  return {
    author: 'Gel', // 默认设为Gel
    authors: ['Gel','shit']
  }
}

这样就能满足你的需求啦，推荐用第一种watch的方式，更符合Vue的响应式设计思想～

内容的提问来源于stack exchange，提问作者aravinvafshe