Как скрыть элементы, которые не соответствуют текущему значению и сравнить с проп - PullRequest
Новая
       54

Как скрыть элементы, которые не соответствуют текущему значению и сравнить с проп

2 голосов
/ 11 октября 2019

У меня разные группы слов на одной странице, скажем, существительные глаголы и прилагательные. Способ описать каждую группу - это «часть речи». Эта «часть речи» печатается внутри маленькой коробки. Итак, у вас есть «часть речи» группы, существительное, в маленьком окошке, и я хочу достичь этого, когда я нажимаю на это окошко, я скрываю глаголы и прилагательные. Если бы я нажал на глагол, я бы спрятал существительные и прилагательные, и так далее. Прямо сейчас «часть речи» каждой группы передается как опора.

Проблема в том, что я хотел бы сравнить части речи, которые существуют на текущей странице, с выбранной частьюречи, но я не могу его различить.

В моем шаблоне у меня есть: 

<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, но теперь они идентичны.

Как сделать сравнение, чтобы сказать: если есть части речи, которые не равнытот, на котором в данный момент нажали, предпримите какое-либо действие (добавьте класс или wtv), чтобы скрыть элемент.

1 Ответ

1 голос
/ 11 октября 2019

Если я хорошо понимаю, чего бы вы хотели достичь, тогда некоторые события должны обрабатываться не подкомпонентами, а родительским компонентом. 

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>

В приведенном выше фрагменте вы можете видеть, что каждые

  1. данные передаются дочернему компоненту как prop (кроме сравнить - там это не нужно)
  2. для каждого из дочерних компонентов устанавливается событие щелчка, которое (@click) $emit() событие и егоподдержать родителя
  3. у родителя есть v-on: для отправленного события, а выполняет функцию на ВСЕХ частях речи (слова в моемприложение; функция окрашивает слова в красный цвет, которые имеют pos как у нажатого).

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Проблема в том, что элементы одного уровня не знаютчто-нибудь друг о друге: они не должны делиться какой-либо информацией друг с другом.

компонент может поделиться своей уникальной информацией о состоянии с родственными компонентами либо через их общего родителя (с помощью отправки события (с данными)) или с использованием некоторой формыиз решения для управления состоянием ( шина событий или хранилище Vuex являются наиболее распространенными в Vue - последнее для серьезных случаев, первоедля случаев, когда требуется больше, чем просто отправка событий, но не требуется ничего действительно сложного).

Пользовательские события в Vue: https://vuejs.org/v2/guide/components-custom-events.html

Шина событий: https://alligator.io/vuejs/global-event-bus/

Управление состоянием Vuex: https://vuex.vuejs.org/

...