时间戳

首页 > 解决方案 > 遍历在 VueJS 中不起作用的对象数组

javascript - 遍历在 VueJS 中不起作用的对象数组

问题描述

我正在尝试遍历 VueJS 中的嵌套对象数组。我正在使用 a<script type="x-template" id="article-content"> </script>来渲染我的

我已经尝试循环通过将 a 附加v-for到它的组件，但仍然没有给我返回数据。这种方法适用于其他组件，但似乎不适用于这个特定领域。

组件模板

<script type="text/x-template" id="article-content">
    <article class="content__article"
        v-for="contentItem in article.content">

      <!-- THIS DOESN'T RENDER CONTENT -->

       <p class="id"> {{ contentItem.id }}</p>
       <p class="type"> {{ contentItem.type }} </p>
       <div v-html="contentItem.content"></div>
    </article>
</script>

XHR 调用将填充文章属性

const article = new Vue({
    el: "#article-content",
    data: {
       article: { 
        'id': '',
        'publishDate': '', 
        'content': [], // array of content items
       }
    }
});

Vue.component('article-content', {
    template: '#article-content',
    props: ['article'],
});

用于渲染的文章内容组件

<article-content
   v-bind:key="article.id"
   v-bind:article="article">
</article-content>

标签： javascriptvue.js

解决方案

编辑：尝试这样的事情。

将 article-content 组件修改为 fallows： 

   Vue.component('article-content', {
        template: '<div>
                      <p class="id"> {{ article.content.id }}</p>
                      <p class="type"> {{ article.content.type }} </p>
                      <div v-html="article.content.id"></div>
                   <div>',
      props: {
      article: Object,
    },
    });

然后将您的内容渲染为休闲：

 <article-content v-for="contentItem in article"
       v-bind:key="contentItem.content.id"
       v-bind:article="contentItem">
    </article-content>

推荐阅读