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

问题描述

问 题

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

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实例里边执行方法再次渲染一个列表出来吗？

解决方案

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

这篇关于javascript - 如何在vue.js已渲染的列表出触发的事件再次渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！