Question

我无法正确传递模板中的json数据。我以找不到的任何方式尝试。如果您希望所有内容都摘录，则可以放它。预先谢谢你。

我的HTML：

<div id="app">
 <cols :pops="pops"></cols>
</div>

我的应用程序：

var main = new Vue({
    el: '#app',
    data:{
        pops: [],
    },
    mounted: function () {
    var self = this;
    $.ajax({
    url: '../assets/data/pop.json',
    method: 'GET',
    success: function (data) {
        self.pops = data;
    },
    error: function (error) {
        console.log(error);
    }
    });
    },

在同一文件（应用程序）中

Vue.component('cols', {
    template:
        `<li v-for="pop in pops"><a href="#"> <b>{{ pop.Commune }}</b><span>{{ pop.Population }}</span><div  :style="{width: ( pop.Population/520504 * 100) + '%'}"></div></a></li>`,
});

错误

属性或方法“ pops”未在实例上定义，但在渲染过程中被引用。
“数据”选项应该是一个在组件定义中返回每个实例值的函数。

Answer 1

您实际上并没有将数据属性传递给组件（和其他组件）。

在您的HTML中尝试执行以下操作：

<div id="app">
 <headermain></headermain>
 <search></search>
 <cols :pops="pops"></cols>
</div>

将data.pops注入cols组件的pops属性中。

无法使用Vue JS在Template中使用JSON数据

1 个答案: