javascript - 如何给Vue的data中的数组赋值?
阿神
阿神 2017-04-11 11:15:37
[JavaScript讨论组]

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


    
        {{item.text}}
        {{item.text}}
        ¥{{item.text}}
    

----------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

求大神答疑解惑!

阿神
阿神

闭关修行中......

全部回复(7)
迷茫

问题已解决,感觉大家!我的解决方法如下(试了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
                    })
高洛峰

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

天蓬老师

试试这个

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)


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

巴扎黑

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

2:操作返回的data数据, 
  data: {
        index: [],
        domain: [],
        price: []
    }
    你这里面是数组,应该vm.index.push("你想要存的值")
大家讲道理
vm.index.push({text:i+1})
vm.domain.push({text:data[i].domain})
vm.price.push({text:data[i].price})
高洛峰

理解一下 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}}

巴扎黑

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

[
    {
        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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号