Question

我正在尝试使用VueJs2框架来过滤JSON对象（该对象被命名为＆＃39; post＆＃39;在我的示例中），该框架使用来自Wordpress REST API的数据对象。我有与我的帖子相关联的嵌套数组（元数据标签），当用户在我的输入元素中键入搜索查询时，我希望过滤/搜索：

JSFIDDLE link

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;
      });
  }
});

如果你能提供一些关于如何进行的建议，那就太棒了。谢谢。

Answer 1

我更新了您的fiddle。您需要循环遍历数组的项而不是整个搜索的数组。

<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>

Answer 2

<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

如何在嵌套循环中使用v-for？

2 个答案: