如何在vue.js已渲染的列表出触发的事件再次渲染？

Question

想要实现的效果：
在数据表格里边每一天的数据旁边点“展开”后，底下展开当天的数据明细（每个详细页面的具体访问量）。

html：

<table id="h_site_dataTable">
    <tr>
        <th>日期</th><th>PV</th><th>UV</th><th>展开明细</th>
    </tr>
    <tr v-for="item in data>
        <td>{{item.date}}</td>
        <td>{{item.pv}}</td>
        <td>{{item.uv}}</td>
        <td v-on:click="detail(item.date)">展开</td>
    <tr>
</table>

script:

    $.getJSON('/api/getAll?platform=h', function(d) {
        var dataTable = new Vue({
            el: '#h_site_dataTable',
            data: d,
            methods: {
                detail:function(date){
                    //再次ajax请求当天的明细数据然后在这里边渲染？                
                }
            }
        })
    });

在vue实例里边执行方法再次渲染一个列表出来吗？

Answer 1

应该先实例化vue再ajax获取数据 赋值给vue实例里的某个data 再次请求的方法写在vue实例中 这样才可以往已经有数据的变量中继续push加载到的新数据 而不是一次拉取就实例化一次

Answer 2

一看你就没有掌握vue.js 的精髓啊。 vuejs视图和内存里的值是绑定的，也就是你只要想办法改变js变量里的值，页面就会跟着实时变化

我给举个我用过的 页面访问人数， 实时刷新的例子
js

 var vm  = new Vue({
      el : '#app',
      data : {nlist:{'num':0,'click':0}}
      
      })
   
   
  function getdata(){

  $.post('', {token: '633de4b0c14ca52ea2432a3c8a5c4c31'}, function(data) {
      
    vm.nlist.num=data.num;
    
    });

  setTimeout(getdata,2000);

  }
 getdata();

      

Answer 3

渲染数据与data里值绑定。多去官网研究下教程http://cn.vuejs.org/