数据绑定到对象

时间:2019-04-04 08:01:07

标签: vue.js

我正在尝试将对象绑定到vue组件。我的对象有吸气剂和吸气剂。每个对象的值都呈现到文本框中。我需要Vue与对象的getter和setter进行通信。

对象的结构:

Collection: {
    Columns: ['a','b','c'...]
    , Items: [
        Object: {
            Values: ['Val1', 'Val2', 'Val3'...]
        }
        ...
    ]
}

Vue代码类似于

<!--<b>data refers to Collection.Items</b>-->
<tr v-for="i in data">
    <!--<b>columns refers to Collection.columns</b>-->
    <!--<td v-for="j in columns"><input type="text" :value="getValue(i,j)" @input="function(e){ setValue(i,j,(e.target||e.srcElement).value); }"/></td>-->
    <td v-for="j in columns"><input type="text" v-model="val(i,j)"/></td>
</tr>

代码:

   //o refers to an object in Collection.Items
   //k refers to a key in Collection.Columns
   //o.getValue returns value from 
   , methods: { //Working with commented td
        getValue: function(o, k){
            return o.getValue(k);
        }
        , setValue: function(o, k, v){
            o.setValue(k, v);
        }
    }
    , computed: {
        val: function(){ //Working with uncommented td
            return function(o,k){
                return o.getValue(k);
            }
        }
    }

我发现了使用:value @value (注释td)的解决方法

https://jsfiddle.net/jdtadlock/z11fe07p/981/

但是我更喜欢使用的是 v模型计算的。当Vue从对象检索值时,(未注释的td)v模型可以完美地工作。但是当Vue将更改的值更新回该对象时,出现错误

Uncaught ReferenceError: Invalid left-hand side in assignment
我想这是因为我没有注册任何设置器。

问题:如何在计算中注册参数化的二传手?

jsfiddle of a whole project

0 个答案:

没有答案