如何使用 vue.js 显示关联数组的值？

Question

我有一个array，它是：

我想创建一个 foreach 循环并将所有 key's 和 script_content's 列出到视图中。

我的vue组件挂载方法：

mounted() {
        this.loading = true;
        axios.get('/app/json-ld/json-ld-settings')
            .then(res => {
                let data = res.data;
                console.log(data.scripts);
                this.key = data.scripts[0]['key'];
                this.scriptContent = data.scripts[0]['script_content'];
            })
            .catch(error => {
                this.loading = false;

                this.$notify({
                    group: 'notify',
                    type: 'error',
                    text: 'Something happened! Please refresh the page and try again or contact support!',
                });
            });
    },

组件数据：

data: () => ({
        errors: {},
        key: [],
        scriptContent: [],

我能够显示第一个数组的值，但不知道如何在关联数组中创建 foreach 循环。

HTML：

    <div class="py-3 d-flex flex-row justify-content-end align-content-end">
        <div class="pr-2">
            <h5>Key</h5>
            <span>{{key}}</span>
        </div>
        <div class="pl-2">
            <h5>Script content</h5>
            <span>{{scriptContent}}</span>
        </div>
    </div>

目标是在 HTML 列表或 div 中列出所有 key's 和 script_content's。

如有任何帮助，将不胜感激。

Answer 1

您应该将所有脚本存储到数据中，而不仅仅是data.scripts[0]，然后使用v-for 指令在模板中迭代它们。这里有几个很好的例子：

https://vuejs.org/v2/guide/list.html

Answer 2

您可以使用以下代码：

data() {
   return {
     keys: [],
     contents: [],
   }
}

...
for (let index in data) {
   this.keys.push(data[index].key);
   this.contents.push(data[index].script_content);
}
...

然后就可以在html代码中使用v-for来使用keys和contents了。