javascript - vue.js 数组过滤二维数组的问题?

Question

1.我的需求:在搜索框输入内容时能过滤出包含内容的数据,删除内容时能返回数据初始状态

       {A商品,B商品,C商品},{B商品}
        搜索:'A'    返回:A商品;  
        退格:''     返回  {A商品,B商品,C商品},{B商品}
        

2.数组结构:

        arrs: [
                {
                    goods: [{
                            title: 'A标题A标题AA标题AA标题AA标题AA标题AA标题AA标题',
                        },
                        {
                            title: 'B标题B标题BB标题BB标题BB标题BB标题BB标题BB标题',
                        },
                        {
                            title: '这是标题这是标题这是标题这是标题这是标题这是标题',
                        }],
                    orderNo: '111111111111',
                    showtr:true
                },
                {
                    goods: [{
                        title: 'A标题A标题AA标题AA标题AA标题AA标题AA标题AA标题',
                    },
                        {
                            title: 'B标题B标题BB标题BB标题BB标题BB标题BB标题BB标题',
                        }],
                    orderNo: '222222222222',
                    showtr:true
                }]

3.我的代码:

  html:<input type="text" v-model="searchGood">
       <tr v-for="arr in msg" v-show='arr.showtr'>
           <p v-for="keys in arr.goods">
                <p class="title">{{keys.title}}</p>
           </p>
      </tr>
 vue.js:computed: {
        msgs() {
            arr = this.goodFilter(this.arrs)
            return arr
        }
        methods:{
             goodFilter (arr) { 
                if (this.searchGood == '')
                    return arr
                var arrs  = [];
                for (var i = 0;i<arr.length;i++){
                    arrs[i] = arr[i]
                }
                arrs = arrs.filter(function (item, index) {
                    var rr = false, self = this;
                    item.goods = item.goods.filter(function (it) {
                        if (it.title.indexOf(self.searchGood) !== -1) {
                            rr = true;
                            return rr;
                        }
                    })
                return rr
                }, this)
                return arrs
        }}
    },

3.我的问题:
在退格后不会返回数据初始状态.
是因为进行了两次filter的原因吗?但我没有修改原数组,而是修改遍历复制的数组啊?
若只对数组进行一次filter,退格是会返回初始状态

    如:return arrs.filter(function(item){return item==1})

希望能得到解决方案.谢谢!

Answer 1

我认为你要对标题进行过滤的话直接把过滤器设置在每一个商品上比较好，没必要对整个全部进行过滤处理，比如我这样。也能实现业务场景。至于你的代码的错误，我不太懂明白为什么在computed里定义methods，我也刚开始学，如果可以给下源码，也想看看你的方法错在哪

<template>
  <p class="hello">
    <input type="text" v-model="searchGood">
    <ul>
      <template v-for="arr in arrs " v-show='arr.showtr'>
        <li v-for="good in arr.goods | filterBy goodFilter">{{good.title}}</li>
      </template>
    </ul>
  </p>
</template>

<script>
  export default {
    data () {
      return {
        // note: changing this line won't causes changes
        // with hot-reload because the reloaded component
        // preserves its current state and we are modifying
        // its initial state.
        msg: 'Hello World!',
        searchGood: '',
        items: [
          {message: 'Foo'},
          {message: 'Bar'}
        ],
        arrs: [
          {
            goods: [{
              title: 'A标题'
            }, {
              title: 'B标题'
            }, {
              title: '这是标题'
            }],
            orderNo: '111111111111',
            showtr: true
          },
          {
            goods: [{
              title: 'AA标题'
            }, {
              title: 'BB标题'
            }],
            orderNo: '222222222222',
            showtr: true
          }]
      }
    },
    methods: {
      goodFilter (good) {
        if (this.searchGood === '') {
          return true
        }
        if (good.title.indexOf(this.searchGood) !== -1) {
          return true
        } else {
          return false
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1 {
    color: #42b983;
  }
</style>