How to show only one component that is used multiple times?

Question

Vue.js

There is a component <comment>, and in it <reply-form>. Of course, there are a lot of comments on one page and initially they are all <reply-form>hidden, and if you click on the button under the comment, a response form will open. So, if you click under each comment, then in the end all the forms will be visible. How to make it so that if one component <reply-form>is visible, then the others would be hidden?

Answer 1

Is the parent always shared? If so, then add a property to it that will indicate in which of your component instances you want to display additional elements. As a value, you can use the index of the instance, for example (it is not necessary, some property from the objects with data, on the basis of which the component instances are created, is also suitable - the main thing is that the values ​​\u200b\u200bare unique, of the id type):

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

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

https://jsfiddle.net/kdg4qevp/
Otherwise, create an observable object, and put a property specifying who to display in it: In your component, add a computed property whose value a) determines whether additional elements should be displayed; b) depends on the property of the observed object:
const xxx = Vue.observable({ active: null });

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

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

Also add a method to your component to toggle the display of additional content:

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

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

https://jsfiddle.net/kdg4qevp/1/

Answer 2

Take the shape up a level.