VueX-数组对象的双向数据绑定
VueX-数组对象的双向数据绑定
小城故事
发布于 2023-03-10 12:03:51
发布于 2023-03-10 12:03:51
VueX-数组对象的双向数据绑定
Vuex不允许在组件内部直接修改共享数据，需要在mutations中修改数据，所以涉及到双向绑定不能使用v-model
💡 需求
需要增加，删除数据，并且可以修改每一项的done
步骤
- 在state中提供一个对象数组
state: {
list: [{
id: 1,
name: '吃吃',
done: false
},
{
id: 2,
name: '喝喝',
done: false
},
{
id: 3,
name: '学vue⭐',
done: true
}
]
},- 使用辅助函数mapState , 将数据展示在页面上，在App.vue中
<div v-for="(item, index) in list" :key="index">
<span> id: {{ item.id }} </span>
<span> name: {{ item.name }} </span>
<span> done: {{ item.done }} </span>
修改done:
<input
type="text"
:value="item.done"
/>
<hr />
</div>
...
...
import { mapState } from 'vuex'
export default {
computed: {
...mapState('data', ['list'])
},
}
123456789101112131415161718192021- 在data.js中的 mutations中添加 增加 删除 的函数
mutations: {
add(state) {
state.list.push({ id: 4, name: '睡觉', done: true })
},
remove(state) {
state.list.pop()
}
},- 使用辅助函数mapMutations ， 将两个方法展示到页面上
<button @click="add">增加数据</button>
<button @click="remove">删除数据</button>
...
...
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState('data', ['list'])
},
methods: {
...mapMutations('data', ['add']),
...mapMutations('data', ['remove']),
}5.修改done属性
- 添加输入事件
- 给input框添加一个输入事件
changeDone,并传入index实参。 - 给input添加一个id，（注意需要动态设置，每一项的id都不相同，以便根据不同的id获取到不同的value值）
- 给input框添加一个输入事件
修改done:
<input
type="text"
:value="item.done"
@input="changeDone(index)"
:id="index"
/>- 在methods里面添加changeDone()函数
- 根据输入框的不同id获取到数组不同项的value
- 触发mutations，注意模块化需要添加模块名 data
- 传递多个参数（注意只能传递一个参数，如果需要传递多个 需要以数组或者对象的形式传递）
{index，val}
changeDone(index) {
let val = document.getElementById(index).value
this.$store.commit('data/changeDone', { index, val })
}- 在data.js的mutations中添加修改输入框值（done）的方法
- 根据下标修改don的值
mutations: {
changeDone(state, { index, val }) {
state.list[index].done = val
}
}效果展示
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-01-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录