Как автоматически скрывать поля комментариев для других радиокнопок при нажатии на другую со своим полем?

Question

[Merle7]

Я в vue новичок, прошу помощи: как сделать так, чтобы при переключении радиобаттонов появлялось поле комментария только для конкретного,выбранного радиобаттона, а вылезшие поля для других радиобаттонов исчезали?
Вот сам виджет https://zweitesherz.github.io/widget/index.html

Vue.component('response-comment', {
    props: ['value','id','type'],
    data() {
        return {
            showComment: false,
            picked: null

        }
    },
         watch: {
             picked (){
                     this.showComment = (this.picked);
             }
         },


    template: `<div class="form_radio"> 

<input  v-model="picked" :id="id" :type="type"  name="radio" :value="value"  :picked = "picked" onchange="document.getElementById(\'submit\').disabled = !this.checked;">

<label :for="id">{{ value }}</label> 


//Вот поле комментария
<label  :for="id"  class="comment" v-if="showComment">

<p>Введите комментарий</p> 
<textarea class="form-control"></textarea>

</label>

</div>`
});


new Vue({
    el: '#firepool',
    data: {

    }
})

Answer 1

[0xD34F]

В родительском компоненте храните индекс/id элемента, у которого поле комментария надо показывать. В зависимости от равенства этого свойства текущему индексу/id, устанавливайте значение параметра, который будет управлять отображением поля комментария. При клике на радиокнопку в дочернем компоненте отправляйте событие, по которому в родителе будет обновляться индекс/id активного элемента.

https://jsfiddle.net/xwhv9k3u/

Comments

[Merle7]

Благодарю!