Question

我正在做的事情有点像按标签搜索系统。我现在正在使用vuetify 1.0.19来做芯片。标签的v模型是一个数组。现在，如果它与卡（Screenshot here）中的筹码不匹配，我想隐藏该卡。我有点想先做jQuery的.find()然后再做.hide()函数，但我不想使用jQuery，因为我正在学习vue。我确实知道如何在jQuery中执行此操作并在脚本的methods部分中对其进行仿真。但是这样做看起来很脏，所以我只是问是否有一种更有效的方法可以做到这一点。

标签

<v-select
  v-model="tags"
  label="Search Tags"
  prepend-icon="label"
  chips
  tags
  @input="hideCard()"
></v-select>

卡片（它位于v-for中，因为它来自数据库。我正在使用nuxt来呈现这些卡片）

<v-flex xs2 v-for="(event, index) in events" :key="index" class="hide-me">
  <v-card hover ripple :to="`/event/${event.idevents}`">
    <v-card-title>
      <h2>{{ event.idevents + ' - ' + event.eventname }}</h2>
    </v-card-title>
    <v-card-text>
      <div class="subheading">Organizer/s:</div>
      <v-chip v-for="(organizer, i) in JSON.parse(event.managedBy)" :key="i">{{ organizer.toUpperCase() }}</v-chip>
    </v-card-text>
  </v-card>
</v-flex>

脚本

export default {
  async asyncData () {
    let data = await axios.get('/events')
    let dbTags = await axios.get('/tags')
    let tagnames = []
    for (let i = 0; i < dbTags.data.length; i++) {
      tagnames.push(dbTags.data[i].tagname)
    }
    return {
      events: data.data,
      savedTags: tagnames,
      tags: []
    }
  },
  methods: {
    hideCard () {
      document.querySelectorAll('.hide-me').forEach(elm => {
        if (this.tags.length > 0) {
          this.tags.forEach(tag => {
            console.log(elm.innerHTML.toLowerCase().indexOf(tag.toLowerCase()) > -1)
            if (!(elm.innerHTML.toLowerCase().indexOf(tag.toLowerCase()) > -1)) {
              elm.classList.add('hide')
            } else {
              elm.classList.remove('hide')
            }
          })
        } else {
          elm.classList.remove('hide')
        }
      })
    }
  }
}

隐藏与v模型不匹配的元素

0 个答案: