工作小提琴

Question

我有一个网站，我想使用Vue 2添加搜索功能，搜索将应用于通过JSON文件在页面加载时生成的组件。

我想要使用的关键词包含在提取的JSON文件中。（名称和标签）（顺便说一下，组件称为池）我当时正在考虑使用计算属性，但是我对如何去做这个有点困惑

这是我到目前为止我的搜索栏组件，但我混淆了计算属性应该如何。

def aList = A.withCriteria {
    // your criteria goes here
}

for(A obj : aList) {
    B b = obj.b
    C c = b.c

    // ...
}

此代码负责显示池列表

    import import org.hibernate.FetchMode

    // ...

    A.withCriteria {
        // criteria goes here

        fetchMode "b", FetchMode.JOIN
        fetchMode "b.c", FetchMode.JOIN
    }

然后只有显示实际池的组件

<template>
    <div class="search">
        <input type="text" v-model="search" placeholder="Search for pools">
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Search Box Mounted')
        },
        data(){
            return{
                search:''
            }
        },
        computed: {
            filteredPools: function(){

            }
        }
    }
</script>

在我的主页面中，这是调用池列表

的内容

<template>
    <div class="container pool" v-bind:id="'poolalgo-' + algo">
        <h2 class="type text-center">{{algo}}</h2>
        <hr class="poolruler" />
        <div class="row">
            <pool v-for="pool in pools" :pool="pool" :key="pool.tag">
            </pool>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('PoolList mounted.')
        },
        props:['pools','algo']
    }
</script>

Answer 1

运行此代码段（整页）并检查这是否是您想要的。它是一个单独的组件，但您可以按照注释进行操作，以便您可以使用它（搜索输入组件+列表组件）

搜索组件

<template>
  <div class="search">
      <input type="text" @input="emitSearch" placeholder="Search for pools">
  </div>
</template>
<script>
export default {
    methods: {
    emitSearch (ev) {
      this.$root.$emit('app:search', ev.target.value)
    }
  }
}
</script>

列表组件

<template>
 <div class="col-xl-3 centered icon" v-for="pool in list" :key="pool.name">
    <a v-bind:href="pool.image" target="_blank">
        <img class="logo img rounded-circle" v-bind:src="pool.image" height="120px" width="120px">
    </a>
    <h4>{{pool.name}}</h4>
    <p>Symbol/Tag: {{pool.tag}}</p>
    <p>Block Time: {{pool.blocktime}}</p>
    //ect
    <br>
  </div>
</template>
<script>
export default {
  data () {
    return {
      search: '',
      orderBy: 'name', // sort by property
      pools: [ // raw list
        {name: 'Yellow pool', tag: 'yellow', blocktime: 123, image: 'https://placehold.it/120'},
        {name: 'Blue pool', tag: 'blue', blocktime: 123, image: 'https://placehold.it/120'},
        {name: 'Purple pool', tag: 'purple', blocktime: 123, image: 'https://placehold.it/120'},
        {name: 'Black pool', tag: 'black', blocktime: 123, image: 'https://placehold.it/120'},
      ]
    }
  },
  computed: {
    list () {
      return this.pools.filter(p => { // first using this.search
        return p.name.toLowerCase()
          .indexOf(this.search.toLowerCase()) > -1
      })
        .sort((a, b) => { // sort using this.orderBy
          const first = a[this.orderBy].toLowerCase()
          const next = b[this.orderBy].toLowerCase()
          if (first > next) {
            return 1
          }
          if (first < next) {
            return -1
          }
          return 0
        })
    }
  },
  created () {
    this.$root.$on('app:search', search => {
      this.search = search
    })
  },
  beforeDestroy () {
    // dont forget to remove the listener
    this.$root.$off('app:search')

  }
}
</script>

工作小提琴

＆＃13;

new Vue({
  el: '#app',
  data () {
    return {
      search: '',
      orderBy: 'name', // sort by property
      pools: [ // raw list
        {name: 'Yellow pool', tag: 'yellow', blocktime: 123, image: 'https://placehold.it/120'},
        {name: 'Blue pool', tag: 'blue', blocktime: 123, image: 'https://placehold.it/120'},
        {name: 'Purple pool', tag: 'purple', blocktime: 123, image: 'https://placehold.it/120'},
        {name: 'Black pool', tag: 'black', blocktime: 123, image: 'https://placehold.it/120'},
      ]
    }
  },
  computed: { // list component computed props
    list () {
      return this.pools.filter(p => { // first using this.search
        return p.name.toLowerCase()
          .indexOf(this.search.toLowerCase()) > -1
      })
        .sort((a, b) => { // sort using this.orderBy
          const first = a[this.orderBy].toLowerCase()
          const next = b[this.orderBy].toLowerCase()
          if (first > next) {
            return 1
          }
          if (first < next) {
            return -1
          }
          return 0
        })
    }
  },
  methods: { // search component method
    emitSearch (ev) {
      this.$root.$emit('app:search', ev.target.value)
    }
  },
  created () { // list component lifecycle hook
    this.$root.$on('app:search', search => {
      this.search = search
    })
  },
  beforeDestroy () { // list component lifecycle hook
    // dont forget to remove the listener
    this.$root.$off('app:search')

  }
})

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script>Vue.config.productionTip = false</script>

<div id="app">
  <!-- search component emits 'app:search' event -->
  <div class="search">
    <input type="text" @input="emitSearch" placeholder="Search for pools">
  </div>
  <hr>
  <!-- list component listens 'app:search' event -->
  <div class="col-xl-3 centered icon" v-for="pool in list" :key="pool.name">
    <a v-bind:href="pool.image" target="_blank">
        <img class="logo img rounded-circle" v-bind:src="pool.image" height="120px" width="120px">
    </a>
    <h4>{{pool.name}}</h4>
    <p>Symbol/Tag: {{pool.tag}}</p>
    <p>Block Time: {{pool.blocktime}}</p>
    //ect
    <br>
  </div>
</div>

＆＃13;

Answer 2

如果您想使用this.search过滤池，请按以下步骤操作：

为您的pools组件添加一个道具，以接受来自父组件的过滤文字。
创建一个为pools组件计算的组件，然后在计算方法中，使用Array.filter应用自定义过滤器。
更改<pool v-for="pool in pools"> to`

<template>
    <div class="container pool" v-bind:id="'poolalgo-' + algo">
        <h2 class="type text-center">{{algo}}</h2>
        <hr class="poolruler" />
        <div class="row">
            <pool v-for="pool in filteredPools" :pool="pool" :key="pool.tag">
            </pool>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('PoolList mounted.')
        },
        props:['pools','algo', 'filterText'],
        computed: {
            filteredPools: function(){ //filter out tag|name includes this.search
              return this.pools.filter((item)=>{
                return this.filterText in item.tag or this.filterText in item.name
              })
            }
        }
    }
</script>

最后，在您的父组件中，使用<pools v-bind:filter-text="search">

排序组件Vue JS的最佳方法

2 个答案:

搜索组件

列表组件

工作小提琴