如何解决计算属性未触发添加到Set HTML组件数据观察者和方法计算属性
免责声明:javascript的新手
我只是试图以以下方式跟踪组件中的所有当前错误,但我没有发现我做错了什么。每当用户名更改时,我的错误集都会更新,也就是说,基于 errors Set的计算属性 displayErrors 也应更改:
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
}
}
谢谢!
解决方法
Set
无法被Vue观察到,只能被普通物体观察。
data
属性的docs对此进行了解释(这也适用于计算属性):
Vue实例的数据对象。 Vue将以递归方式将其属性转换为getter / setter,以使其“具有反应性”。 对象必须为纯:忽略诸如浏览器API对象和原型属性之类的本地对象。一条经验法则是,数据应该只是数据-不建议观察具有其自身状态行为的对象。
您应该使用数组存储错误列表。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。