這次給大家帶來Vue.js的列表數據的同步更新方法，Vue.js列表數據同步更新方法的注意事項有哪些，下面就是實戰案例，一起來看一下。
數組的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都會觸發列表的更新;
filter(),concat(),slice()等不會觸發列表的更新!
下面兩種情形也不會觸發列表數據更新
1.為數組的某一項賦值 vm.items[indexOfItem] = newValue,
2.改變數組的長度 vm.items.length = newLength也不會觸發列表的更新!
要實現的效果:
列表數據的更新
代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<template>
<div id=
"myapp"
>
<ul>
<li v-
for
=
"item in list"
>
{{item.name +
'-'
+ item.price}} </li>
</ul>
<button v-on:click=
"addItem"
>addItem</button>
</div></template><script>
export
default
{ data:
function
() {
return
{ list: [
{ name:
'apple'
, price: 34
},
{ name:
'banana'
, price: 56
}
]
}
}, methods: {
//點擊按鈕新增push觸發列表數據的更新
addItem () { this.list.push({ name:
'pinaapple'
, price: 256
})
}
}
}</script>
|
為數組的某一項賦值 vm.items[indexOfItem] = newValue不會觸發列表數據的更新,那么怎么才能讓他更新數據呢? 用Vue的set()方法可以辦到.
|
1
2
3
4
5
6
7
8
|
methods: {
addItem () {
// 把數組的第 1 個替換成新的值
Vue.set(this.list, 1, {
name:
'pinaapple'
,
price: 256
})
}
}
|
效果圖:
文章來源：http://www.php.cn/js-tutorial-388258.html