时间戳

首页 > 解决方案 > 无法使用 vue js 在模板中处理 json 数据

templates - 无法使用 vue js 在模板中处理 json 数据

问题描述

我无法正确传递模板中的 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>`,
});

错误

标签： templatesvue.jsvuejs2vue-componentvue-router

解决方案

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

在您的 HTML 中尝试这样做：

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

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

推荐阅读