未触发计算属性（添加到 Set）答案

【问题标题】：Computed property not triggered (add to Set)未触发计算属性（添加到 Set）
【发布时间】：2020-12-05 13:36:51
【问题描述】：

免责声明：javascript 新手

我只是试图通过以下方式跟踪组件中的所有当前错误，但我不明白我做错了什么。每次用户名更改时，我的错误集都会更新，也就是说，我的计算属性 displayErrors 基于 errors 集也应该更改：

HTML 组件

<ol v-if="displayErrors">
  <li v-for="e in errors" v-bind:key="e">
    {{ e }}
  </li>
<ol>

数据

data: function () {
    return {
      username: "",
      errors: new Set(),
    }
  }

观察者和方法

watch: {
    username: function (username) {
      this.checkUsernameAvailability(username)
    }
  },
  methods: {
    async checkUsernameAvailability(username) {
      const errorCode = 'usernameNotAvailable'

      try {

        const response = await this.$apollo.query({ query: GET_USERS_QUERY })
        const users = response.data.users

        const usernames = users.map((user) => { return user.username })
        
        if (usernames.includes(username)) {
          this.errors.add(errorCode)
        } else {
          this.errors.delete(errorCode)
        }
        
        // trying to force the computed property
        this.$forceUpdate()

      } catch (error) {
        console.log(error)
        return false
      }
    }
  }

计算属性

computed: {
    displayErrors: function() {
      console.log('triggered', this.errors.size)
      return this.errors.size > 0
    }
  }

提前致谢！

【问题讨论】：

new set() 不适用于 Vue。最好使用 Array 来实现您想要的。

标签： vue.js vuejs2 vue-component computed-properties

【解决方案1】：

Set 不能被 Vue 观察到，只能被普通对象观察到。

data 属性的 docs 解释了这一点（这也适用于计算属性）：

Vue 实例的数据对象。 Vue 将递归地将其属性转换为 getter/setter 以使其“反应”。 对象必须是普通对象：忽略浏览器 API 对象和原型属性等原生对象。经验法则是数据应该只是数据 - 不建议观察具有自己状态行为的对象。

您应该使用数组来存储错误列表。

【讨论】：