Vue应用v-if中使用Array.includes报无法读取undefined属性问题

你遇到的报错是testArray的定义和作用域错误导致的，有三处核心问题：

1. testArray没有在Vue实例的data选项中声明，不属于响应式属性，模板无法直接访问
2. 你在checkTier函数中用let声明的testArray是函数局部变量，后续用this.testArray访问时实例上根本不存在该属性，最终模板读取到的testArray是undefined，调用includes自然会报错
3. 额外错误：checkTier方法没有放在Vue的methods配置项中，无法被组件的input事件正常触发

方案1：按你原有逻辑修改 #

修改JS代码 #

new Vue({
  el: "#app",
  components: {Multiselect: window.VueMultiselect.default},
  data: {
    tiers:[
      {name: "test tier"}
    ],
    selectedTier: [],
    values: [
      {name: "adam", tier: "test tier"},
      {name: "sam", tier:"none"}
    ],
    // 新增：在data中声明响应式属性testArray
    testArray: []
  },
  // 新增：将自定义方法放入methods配置项
  methods: {
    checkTier(){
      // 每次更新前清空旧数据，避免历史值残留
      this.testArray = []
      this.selectedTier.forEach(fields => {
        this.testArray.push(fields.name);
      });
    }
  }
})

HTML代码无需修改，原有v-if="testArray.includes(value.tier)"可正常运行。

方案2：更简洁的优化方案（推荐） #

无需手动维护testArray和绑定input事件，直接用计算属性自动同步选中值：

new Vue({
  el: "#app",
  components: {Multiselect: window.VueMultiselect.default},
  data: {
    tiers:[
      {name: "test tier"}
    ],
    selectedTier: [],
    values: [
      {name: "adam", tier: "test tier"},
      {name: "sam", tier:"none"}
    ]
  },
  computed: {
    // 计算属性会自动跟随selectedTier的变化实时更新
    testArray() {
      return this.selectedTier.map(item => item.name)
    }
  }
})

同时删除Multiselect组件上的@input="checkTier"绑定即可，逻辑更简洁，也不会出现变量作用域类错误。

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