ajax返回的数据怎样绑定到vue对象上，希望大牛指点下

发布于
2016-04-23

我写的代码在这里，为什么不能显示数据呢，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <title>vue.js练习</title>
</head>
<body>
    <script type="text/x-template" id="grid-template">
        <table>
            <thead>
                <tr>
                    <th v-for="key in data">{{key}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="entry in columns">
                    <td v-for="key in data">{{entry[key]}}</td>
                </tr>
            </tbody>
        </table>
    </script>
    <div id="demo">
        <demo-grid :data="gridData" :columns="gridColumns">
        </demo-grid>
    </div>
    <button>点击渲染列表数据</button>
    <script type="text/javascript">
        var vm = new vue({
            el: "#demo",
            data: {
                gridData: ["name","power"],
                gridColumns: []
            }
        });
        $('button').click(function(){
            $.ajax({
                url: "mock.json",
                success: function(data){
                    vm.data.gridColumns = data;
                }
            });
        });
    </script>
</body>
</html>

javascript

阅读 5.7k

2 个回答

得票最新

小编噗噗

8124

发布于
2016-04-23

✓ 已被采纳

先不说模板的问题，你的vm.data.gridColumns = data;应该写成vm.gridColumns = data;
关于vue.js的问题建议直接看官方文档，或者到官方论坛上面提。