Question

我有一个显示项目列表的视图页面。单击某个项目时，当前项目详细信息将显示在详细视图页面上。当前项目的标题和描述显示完美，但是对于每个项目，我还有一个包含3个图像的嵌套图库，我也需要显示它们。这是jsFiddle

HTML

  <h1 v-if="isActive(0)">Master View</h1>
  <h1 v-if="!isActive(0)">Detailed View</h1>

  <div id="breadcrumb">
    <a v-if="!isActive(0)" @click="setActive(0)">&lt; Back</a>
  </div>

  <main>
    <article>
      <h2>{{items[active].title}}</h2>
      <p>{{items[active].description}}</p>
    </article>

    <ul id="master-ul" v-if="isActive(0)">
      <li v-for="item in items" @click="setActive($index)">
        <img v-bind:src="item.thumbnail" alt="{{item.title}}" />
        <p>{{item.title}}</p>
      </li>
    </ul>

    <ul v-if="!isActive(0)">
      <!-- Need to display the nested images from the current index item -->
      <li v-for="item in items">
        <img v-bind:src="item.gallery.image" />
      </li>
    </ul>
  </main>

</div>

JS

new Vue({
  el: '#app',
  data: {
    active: 0,
    items: [{
      title: 'Default',
      description: 'lorem ipsum default',
      thumbnail: 'http://placehold.it/250x250'

    }, {
      title: 'One',
      description: 'lorem ipsum 1',
      thumbnail: 'http://placehold.it/250x250?text=Item+1+Thumb',
      gallery: {
        image: 'http://placehold.it/250x250?text=Item+1+image+1',
        image: 'http://placehold.it/250x250?text=Item+1+image+2',
        image: 'http://placehold.it/250x250?text=Item+1+image+3'
      }

    }, {
      title: 'Two',
      description: 'lorem ipsum 2',
      thumbnail: 'http://placehold.it/250x250?text=Item+2+Thumb',
      gallery: {
        image: 'http://placehold.it/250x250?text=Item+2+image+1',
        image: 'http://placehold.it/250x250?text=Item+2+image+2',
        image: 'http://placehold.it/250x250?text=Item+2+image+3'
      }

    }]
  },
  methods: {
    isActive: function(i) {
      return this.active === i
    },
    setActive: function(i) {
      return this.active = i
    }
  }
});

Answer 1

编辑：

使用conmputed属性获取活动项目库

直接在<img>标签上使用另一个v-for指令来循环浏览图库中的图像。

computed: {
  activeImages: function () {
    return this.items[this.active].gallery
  }
}
<ul v-if="!isActive(0)">
 <li>
    <img  v-for="image in activeImages" v-bind:src="image" />
  </li>
</ul>

如何在Vue js中获取嵌套数据

1 个答案: