首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何隐藏与当前值不匹配的元素并与支柱进行比较

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

Stack Overflow用户
提问于 2019-10-11 14:34:17
回答 1查看 326关注 0票数 2

我在一页上有不同的词组,比方说名词、动词和形容词。描述每一组的方法是用它的“词性”来描述。这个“演讲部分”是印在一个小盒子里的。所以你有这个小组的“词性部分”,名词,在这个小盒子里,我想要实现这一点,当我点击那个框时,我隐藏了动词和形容词。如果我点击动词,我就会隐藏名词和副词,等等。现在,每个群体的“部分讲话”正被作为一种道具来传递。

问题是,我想比较当前页面上存在的词性部分和单击的部分,但我无法区分它。

在我的模板里我有:

代码语言:javascript
运行
复制
<div class="part-of-speech">
    <p class="pos">{{ pos }}</p>
</div>

这个{ pos }来自我的道具

代码语言:javascript
运行
复制
props: {
    pos: {
        type: String,
        required: false,
        default: "na"
    }
},
mounted() {
   console.log(this.pos)
}

这给了我在页面上打印的所有词类(考虑到这是其他东西的一个子组件,这些单词组的打印次数和组数一样多)。所以我认为,添加一种方法来检测被点击的语音部分会有帮助。

代码语言:javascript
运行
复制
<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在这个上下文中不再是页面上的词性部分列表,但它已经成为当前单击的语音部分。我的想法是在posthis.pos之间进行某种程度的比较,但它们现在是相同的。

如何进行比较:如果词类中有与当前单击的部分不相等的部分,则采取一些操作(添加类或wtv)来隐藏元素。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-11 15:39:39

如果我很清楚,您想要实现什么,那么有些事件不应该由子组件来处理,而应该由父组件来处理。

代码语言:javascript
运行
复制
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
        }
      })
    }
  }
})
代码语言:javascript
运行
复制
<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>

在上面的片段中你可以看到

  1. 数据作为支柱传递给子组件(除了compare --那里不需要),在每个子组件上设置一个单击事件,该事件(@click) $emit()事件及其支持返回到父组件H 212H 113父程序具有E 114v- on:E 215,E 116对<语音代码>E217(我的应用程序中的单词)的所有部分执行一个函数;函数将具有与单击的pos相同的单词颜色为红色)。

更多信息

问题是兄弟元素不知道彼此的任何信息:它们不应该彼此共享任何信息。

组件可以通过其公共父级(通过发出事件(具有数据有效载荷))或使用某种形式的状态管理解决方案(事件总线<代码>E 231或E 132Vuex存储<代码>E 233)与同级组件共享自己的唯一状态信息,这是E 134VueVueE 235中最常见的--对于严重的情况,前者适用于需要简单事件发射但不需要任何真正复杂的事情的场合。

Vue中的自定义事件: https://v2.vuejs.org/v2/guide/components-custom-events.html

事件总线: https://alligator.io/vuejs/global-event-bus/

Vuex状态管理: https://vuex.vuejs.org/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58343496

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档