V-model 双向绑定 computed 的对象数组

我的使用场景是,通过异步接口获取数据(是一个对象数组)之后,先存入 vuex 中,组件从vuex 中拿到数据之后,先通过 computed 计算获取到经过加工的一个 对象数组,在 template 部分的话,通过 v-for 和 v-model 循环并企图双向绑定 computed 中的那个对象数组, 因为 computed 中的属性是没有 set 函数的,会报错,我加上 set 之后,貌似还是不可以。

用 用 jsfiddle 写了一个demo, 希望各位帮忙看看。
另外几个demo
demo-1

这个是跟 data 结合 使用的 computed (实际的 get set 函数写了就是实现 data 中的监听功能而已) demo-02

image

另外想问一问,为什么 在set 函数中写了一个 console 但是实际响应的过程中没有 log 输出?

你每次修改的应该是原数据,这样数据发生变化之后会自动重新计算


sorry 我的本意是想这样的,确实是需要去修改 computed 中的属性依赖的值。 但是我不理解的是为什么 根本不会执行 _todos 的 set 函数, 如下图。

image

而且啊,因为 用了 v-on:change 感觉就不是双向绑定了啊 :joy:

我的希望是写一个 set 函数之后,像 双向绑定 data 中的数据一样双向绑定 computed 的数据

demo

get 是读取时候触发
set 是赋值时候触发
所以你要执行set方法 那么你必须要有 this._todos = … 这个操作

v-model 不行的原因是 你改变的是 _todo计算完之后的值,它的内部值并没有 添加set get 方法

今天我也遇到了和楼主一样的问题,看了楼上的评论发现可以这样实现
组件中循环代码:

<b-field horizontal v-for="(item, index) in items" :key="index" :label="item.name">
    <b-input v-bind:value="item.weight" @input="items= {index: index, value: parseFloat($event)}" type="number"></b-input>
</b-field>

计算属性setter函数:

set ({index, value}) {
    window.console.log(index, value);
    this.$store.commit('app/items', value);
}