Как использовать v-for во вложенных циклах?

Question

Как использовать v-for во вложенных циклах?

1

Я пытаюсь отфильтровать объект JSON (в моем примере объект называется "post"), используя инфраструктуру VueJs2, использующую объект данных из API-интерфейса Wordpress REST. У меня есть вложенные массивы (теги метаданных), связанные с моими сообщениями, которые я хочу фильтровать/искать, когда пользователь вводит поисковый запрос в мой элемент ввода:

Ссылка JSFIDDLE

HTML:

<div id="app" class="container" style="padding-top: 2em;">      
  <input v-model="searchText">

  <table class="table table-striped" v-if="posts">
    <thead>
      <tr>
        <th>Title</th>
        <th>Product Type</th>
      </tr>
    </thead>
    <tr v-for="post in itemsSearched">
        <td>{{post.title.rendered}}</td>
        <!-- this part is probably not correct -->
        <td v-for="post._embedded['wp:term'][1] in itemsSearched"></td>
    </tr>
  </table>
</div>

JS:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello world',
    searchText: '',
    posts: []
  },
  computed : {
    itemsSearched : function(){
      var self = this;
      if( this.searchText == ''){
        return this.posts;
      } 
      return this.posts.filter(function(post){
        return post.title.rendered.indexOf(self.searchText) >= 0;
        //what to put here to filter the tags ??
      });
    }
  },
  created: function(){
    $.get('https://wordpress-dosstx.c9users.io/wp-json/wp/v2/products/' + '?_embed=true')
      .done(function(data) {
        vm.posts = data;
      });
  }
});

Если вы можете дать несколько советов о том, как действовать, это будет здорово. Спасибо.

redshift 29 июнь 2017, в 17:10

Источник

0

Какие ключи вашего объекта вы хотите найти? И не могли бы вы дать лучшее представление о макете, который вы хотите? Вы хотите TD для каждого свойства, которое соответствует?
Bert 29 июнь 2017, в 16:04

Теги:

javascript

vuejs2

wordpress-rest-api

2 ответа

Ещё вопросы

Какие ключи вашего объекта вы хотите найти? И не могли бы вы дать лучшее представление о макете, который вы хотите? Вы хотите TD для каждого свойства, которое соответствует?

Kent Dela Cruz Fueconcillo · Answer 1 · 2017-10-24T16-19-00.000Z

<div v-for="item in parentObject">
<div v-for="item2 in item.childObject1">
<div v-for="item3 in item2.chileObject2"></div>
</div>
</div>

я создаю что-то вроде этого

родитель

-name:

--childObject1

--mySon

---childObject2

---myGrandChild

whoacowboy · Answer 2 · 2017-06-29T14-39-00.000Z

Я обновил вашу скрипку. Вам нужно пропустить элемент массива, а не весь искомый массив.

<div id="app" class="container" style="padding-top: 2em;">      
  <input v-model="searchText">

  <table class="table table-striped" v-if="posts">
    <thead>
      <tr>
        <th>Title</th>
        <th>Product Type</th>
        <th>Tags</th>
      </tr>
    </thead>
    <tr v-for="post in itemsSearched">
      <td>
        <a :href="post.link" target="_blank">
          <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url"
             style="width:75px;height:75px;"/>
        </a>
      </td>
      <td>
        <a :href="post.link" target="_blank" v-html="post.title.rendered"></a><br/>
        <div v-html="post.content.rendered"></div>
      </td>
      <td v-for="item in post._embedded['wp:term']">
        <div v-for="subItem in item">
          <a :href="subItem.link">{{subItem.name}}</a>
        </div>
      </td>
    </tr>
  </table>
</div>