vue模板里面直接取数组的元素值无效怎么办?
发布网友
发布时间:2022-04-23 02:42
我来回答
共2个回答
热心网友
时间:2022-04-22 17:41
检查数组的位置,需要放在data的function里面,模板元素才能取到这个值。
另外需要检查后面有没有重新赋值。
热心网友
时间:2022-04-22 18:59
vue的计算属性
计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data。
首先看一下计算属性的基本写法(摘自官网)
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})12345678910111213
这样我们在模版里这样引入computed属性就可以了,他的效果个data一样
<div id="demo">{{ fullName }}</div>1
这样我们修改firstName或者lastName,fullName都会同步更新
这里我们主要不是讲这个,而是讲如果把 firstName和lastName放在一个数组里
比如这样[firstName ,lastName]
如果这时候修改数组中的一项会不会有相同的效果呢?
修改一下代码
var vm = new Vue({
el: '#demo',
data: {
nameArray:['Foo' ,'Bar']
},
computed: {
fullName: function () {
return this.nameArray[0] + ' ' + this.nameArray[1]
}
}
})123456789101112
methods: {
change () {
this.nameArray[0] = '123'
}1234
触发change方法可见fullName并没有变化。原因可能是vue没有监听到数组 nameArray的长度变化。
此时我们可以采用splice让数组的长度有个变化,这时候vue就可以监听到了
this.nameArray.splice(0, 1, '123')1
或者使用vue的$set方法
this.$set(this.nameArray, 0, '123')1
还有一点要注意,就是如果这个计算属性没有使用过,也就是说页面中没有引用,也没有其他变量使用他,同样不会触发计算属性。至少,来个console打印一下也行