Vue.js中如何用变量获取voteDict数组并判断poiId是否存在？

问题所在 #

你当前的代码存在两个关键错误：

• 语法错误：votes.voteDict.[catid] 里多了一个多余的点，通过变量访问对象属性的正确写法是 votes.voteDict[catid]
• 逻辑错误：用===判断shop.poiId和整个数组相等，这完全不符合你的需求——你需要判断的是该poiId是否存在于目标数组中

正确写法 #

首先要修正data中的votes定义：你原本把votes设为数组，但描述里它包含voteDict对象，这会导致votes.voteDict无法获取到值。如果voteDict是votes的下属属性，应该把votes定义为对象：

data: function () {
  return {
    votes: {
      voteDict: {} // 后续从API获取数据填充
    }
  }
}

之后使用数组的includes方法判断poiId是否存在，同时增加前置判断避免空值报错：

<v-if="votes.voteDict && votes.voteDict[catid] && votes.voteDict[catid].includes(shop.poiId)">

如果能确定voteDict和对应catid的数组一定存在，也可以简化为：

<v-if="votes.voteDict[catid].includes(shop.poiId)">

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