@adam_carraway

Как показывать только один компонент, который используется несколько раз?

Есть компонент <comment>, а в нем <reply-form>. Разумеется, на одной странице много комментариев и изначально все <reply-form> скрыты, а если нажать на кнопку под комментарием, то откроется форма для ответа. Так вот, если под каждым комментарием понажимать, то в итоге все формы будут видны. Как сделать так, чтобы если один компонент <reply-form> виден, то другие были бы скрыты?
  • Вопрос задан
  • 187 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Родитель всегда общий? Если да, тогда добавьте в него свойство, которое будет указывать, в каком из экземпляров вашего компонента надо отображать дополнительные элементы. В качестве значения можно использовать индекс экземпляра, например (не обязательно, также подойдёт какое-нибудь свойство из объектов с данными, на основе которых создаются экземпляры компонента - главное, чтобы значения были уникальными, типа id):

data: () => ({
  items: [ ... ],
  active: null,
}),

<v-xxx
  v-for="(n, i) in items"
  :показыватьДополнительныйКонтент="active === i"
  @переключитьОтображениеДополнительногоКонтента="active = active === i ? null : i"
  ...

https://jsfiddle.net/kdg4qevp/

В противном случае создайте наблюдаемый объект, и поместите свойство, указывающее кого отображать, в него:

const xxx = Vue.observable({ active: null });

В свой компонент добавьте вычисляемое свойство, значение которого а) определяет необходимость демонстрации дополнительных элементов; б) зависит от свойства наблюдаемого объекта:

computed: {
  показыватьДополнительныйКонтент() {
    return xxx.active === this.какоеТоСвойствоСУникальнымЗначением;
  },
},

<div v-if="показыватьДополнительныйКонтент">
  ...
</div>

Также добавьте в свой компонент метод для переключения отображения дополнительного содержимого:

methods: {
  переключитьОтображениеДополнительногоКонтента() {
    xxx.active = this.показыватьДополнительныйКонтент
      ? null
      : this.какоеТоСвойствоСУникальнымЗначением;
  },
},

<button @click="переключитьОтображениеДополнительногоКонтента">
  {{ показыватьДополнительныйКонтент ? 'hide' : 'show' }}
</button>

https://jsfiddle.net/kdg4qevp/1/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
Вынесите форму на уровень выше.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы