Question

我有一个固定的JSON数组，其中包含3组数据。我想为我拥有的每个网页访问一个不同的数组，也许在某个时候访问一个页面上的多个数组。

如何使用Vue访问JSON文件中的特定数组？我尝试过<h2>{{items[0].page1}}</h2>，但没有任何回报。

我在下面的链接中放了一个3页演示的示例：

https://arraydemo.netlify.com

<body>
<!-- Page List -->
<div class="container text-center mt-5" id="app">
    <h1 class="display-4">Vue Page Output:</h1>
    <h2>{{items[0].page1}}</h2>
</div>
<div class="container text-center mt-5">
    <h3>Other Pages</h3>
    <a href="products.html">Products</a>
    <a href="contactus.html">Contact Us</a>
</div>
<!-- /.container -->

<script type="text/javascript">
    const app = new Vue({
    el: '#app',
    data: {
        items: []
    },
    created: function () {
        fetch('test.json')
        .then(resp => resp.json())
        .then(items => {
            this.items = items
        })
    }
    });
</script>
</body>

JSON

[
    [
    {
        "page1": "Company Name"
    }
    ],
    [
    {
        "products": "Product List"
    }
    ],
    [
    {
        "contactus": "Contact Us at Acme Corp"
    }
    ]
]

Answer 1

您有一个数组数组：

[
    [{
        "page1": "Company Name"
    }], ...

您正在尝试访问该对象之前，请尝试：<h2>{{items[0][0].page1}}</h2>

使用Vue.JS在不同页面上访问多个数组

1 个答案: