如何隐藏与当前值不匹配的元素并与prop进行比较

Question

我在一个页面上有不同的词组，比方说名词动词和形容词。描述每个组的方法是用它的'part-of-speech'。这个 'part-of-speech' 被打印在一个小盒子里。所以你有组的 'part-of-speech'，名词，在小盒子里，我想实现这一点，当我点击那个盒子时，我隐藏了动词和形容词。如果我点击动词，我会隐藏名词和形容词，等等。现在每个组的 'part-of-speech' 作为 prop 传入。

问题是我想将当前页面上存在的词性与单击的词性进行比较，但我无法区分它。

在我的模板中我有：

<div class="part-of-speech">
    <p class="pos">{{ pos }}</p>
</div>

这个{ pos }来自我的道具

props: {
    pos: {
        type: String,
        required: false,
        default: "na"
    }
},
mounted() {
   console.log(this.pos)
}

这给了我页面上打印的所有词性（考虑到这是其他东西的子组件，这些词组的打印次数与组的次数一样多).所以我认为添加一种方法来检测点击的词性会有所帮助。

<div class="part-of-speech" @click="handleSelectedPos(pos)">
    <p class="pos">{{ pos }}</p>
</div>

props: {
    pos: {
        type: String,
        required: false,
        default: "na"
    }
},
methods: {
    handleSelectedPos(pos) {
        console.log(pos);
        console.log(this.pos);
    }
}

当我点击当前项目时，我得到的是当前的词性，正如你所看到的，this.pos在这个上下文中不再是当前的词性列表页面却变成了当前点击的词性。我的想法是以某种方式在 pos 和 this.pos 之间进行比较，但它们现在是相同的。

如何比较say：如果有词性不等于当前点击的词性，采取一些措施（加一个class或wtv）隐藏该元素。

Answer 1

如果我理解的很好，你想达到的效果，那么有些事件不应该由子组件处理，而应该由父组件处理。

Vue.component('partOfSpeech', {
  props: ['pos', 'text'],
  template: `<div :class="pos" @click='emitEvent'>{{text}}</div>`,
  methods: {
    emitEvent() {
      this.$emit('emitpos', this.pos)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    words: [{
        pos: 'noun',
        text: 'noun1',
        compare: false
      },
      {
        pos: 'verb',
        text: 'verb1',
        compare: false
      },
      {
        pos: 'adjective',
        text: 'adjective1',
        compare: false
      },
      {
        pos: 'noun',
        text: 'noun2',
        compare: false
      },
      {
        pos: 'verb',
        text: 'verb2',
        compare: false
      },
      {
        pos: 'adjective',
        text: 'adjective2',
        compare: false
      },
      {
        pos: 'verb',
        text: 'verb3',
        compare: false
      },
      {
        pos: 'noun',
        text: 'noun3',
        compare: false
      },
      {
        pos: 'adjective',
        text: 'adjective1',
        compare: false
      },
    ]
  },
  methods: {
    filterWords(val) {
      this.words.forEach(e => {
        if (e.pos === val) {
          e.compare = true
        } else {
          e.compare = false
        }
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <part-of-speech :key="i" v-for="(word, i) in words" :pos="word.pos" :text="word.text" v-on:emitpos="filterWords" :style="{ color: !word.compare ? 'black' : 'red'}" />
</div>

在上面的代码片段中，您可以看到每个

数据作为 prop 传递给子组件（除了 compare - 那里不需要）
在每个子组件上都设置了一个点击事件，即（@click）$emit()一个事件及其返回给父组件的支持
父级有一个 v-on: 用于发出的事件，并且 对所有词性执行函数 （单词在我的应用程序中；函数将与单击的 pos 相同的单词着色为红色。

如何隐藏与当前值不匹配的元素并与prop进行比较

How to hide elements that do not match the current value and compare with prop

javascript

vue.js

match

vue-props

更多信息