vuejs 2.0 fliter検索フィルタ

7039 ワード

これは公式の例ですhttps://cn.vuejs.org/v2/examp...
これはあなたのデータに基づいて公式に修正されました.
https://jsfiddle.net/ycloud/b...プレビューをクリック
script
var vm = new Vue({
  el: '#app',
  data: {
    search: '',
    products: [{
      name: '  ',
      price: 25,
      category: "  "
    }, {
      name: '  ',
      price: 15,
      category: "  "
    }, {
      name: '  ',
      price: 65,
      category: "  "
    }, {
      name: '  ',
      price: 2500,
      category: "  "
    }, {
      name: '  ',
      price: 10025,
      category: "  "
    }, {
      name: '  ',
      price: 15,
      category: "  "
    }, {
      name: '  ',
      price: 25,
      category: "  "
    }]
  },
  computed: {
    searchData: function() {
      var search = this.search;

      if (search) {
        return this.products.filter(function(product) {
          return Object.keys(product).some(function(key) {
            return String(product[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }

      return this.products;    }  }})

html
<div id="app">
  <input v-model='search' />
  <ul v-if="searchData.length > 0">
    <li v-for="item in searchData">{{item.name}},  :¥{{item.price}}
  
  <div v-else>