如何给Vue的data中的数组赋值？

Question

---------html-----------

<tbody id="tbody">
    <tr>
        <td v-for="item in index">{{item.text}}</td>
        <td v-for="item in domain">{{item.text}}</td>
        <td v-for="item in price">￥{{item.text}}</td>
    </tr>
</tbody>

----------script------------

  var vm = new Vue({
    el: "#tbody",
    data: {
        index: [],
        domain: [],
        price: []
    }
})

.....
function getBackData(params, page, callback) {
    clearTimeout(timer);
    timer = setTimeout(function() {
        ajaxHandler = $.ajax({
            url: '/get_history_price?p=' + page,
            dataType: 'json',
            type: 'get',
            data: params,
            success: function(result) {
                for (i = 0; i < data.length; i++) {
                    /*--------问题所在，以下是错误的写法---------*/
                    vm.index[i] = i + 1;
                    vm.domain[i] = data[i].domain;
                    vm.price[i] = data[i].price;
                    /*-----------如何给以上数据赋值------------*/
                }
                if (callback) {
                    callback(result['page']['total_page'], result['page']['current'])
                }
            }
        });
    }, 500);
}

想要实现的是如下效果，例如：
1 qqrr.com ￥5000
2 xxxe.com ￥4566
3 vues.com ￥3456

求大神答疑解惑！

Answer 1

问题已解决，感觉大家！我的解决方法如下(试了Vue.set(object, key, value))，但是报错了）

html

    <tbody id="tbody">
        <tr v-for="item in items">
            <td> {{item.index}} </td>
            <td> {{item.domain}} </td>
            <td> {{item.price}} </td>
            <td> {{item.trade_type}} </td>
            <td> {{item.endtime}} </td>
            <td> {{item.platform}} </td>
        </tr>
    </tbody>

js

 var vm = new Vue({
        el: "#tbody",
        data: {
            items: []
        }
    })
    
    ...

vm.items.push({
    index: i + 1,
    domain: data[i].domain,
    price: data[i].price,
    trade_type : data[i].trade_type,
    endtime : data[i].endtime,
    platform : data[i].platform
})

Answer 2

data 直接 赋给 data 然后 html 里 遍历 data

Answer 3

试试这个

vm.index.$set(i,{text:i+1});
vm.domain$set(i,{text:data[i].domain}) ;
vm.price$set(i,{text:data[i].price}) ;

按照你的格式

vm.index[i] = {text:i+1};

下个Vue Devtools扩展程序吧，方便找错，能看到是没更新视图还是没赋值成功。
这么写的话，好像不会更新视图，因为有这么句话

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上;（就是vue2.x的$set）

。
你先试试吧，有问题再说。

Answer 4

1：你success返回成功后的data，是什么干嘛要再去赋值，可以将取data里面的数据直接遍历渲染到页面

2：操作返回的data数据， 
  data: {
        index: [],
        domain: [],
        price: []
    }
    你这里面是数组，应该vm.index.push("你想要存的值")

Answer 5

vm.index.push({text:i+1})
vm.domain.push({text:data[i].domain})
vm.price.push({text:data[i].price})

Answer 6

理解一下 vue 的响应式系统，就能够明白视图不更新的原因了。
深入响应式原理

这是 vue 响应系统的局限，所以专门搞了个 vm.$set 方法来做这种事情。

尤雨溪也说了，在接下来的 2017 年，可能会使用 ES6 的 Proxy 特性来改进 vue 的响应系统。

最简单的方式，应当是直接重新复制：

var i, 
    len,
    index = [], 
    domain = [],
    price = [];

for (i = 0, len = data.length; i < len; i++) {
    index.push(i + 1);
    domain.push(data[i].domain);
    price.push(data[i].price);
}

vm.index = index;
vm.domain = domain;
vm.price = price;

另外提一下，你那种方式是可能存在问题的。想一下多次 ajax 请求返回 data.length 不等的情况，问题就大了。

最后，循环写的方式也不对，应当将 {{item.text}} 改为 {{item}}

Answer 7

保证数组元素是对象就可以了

[
    {
        text: "aaaa",
        domain: "qqt"
        price: 20
    },
    {
        text: "bbb",
        domain: "zzz",
        price: 998
    }
]

而且我觉得你只需要一个数组就行了，而不是三个，然后在 v-for 加在 tr 上面

    <tr v-for="(item, index) in list">
        <td>{{index}}</td>
        <td>{{item.domain}}</td>
        <td>￥{{item.price}}</td>
    </tr>