Vue: изменение свойства компонента с родительского компонента при нажатии, переключатели

Question

У меня есть два компонента: Toggle.vue, который по сути является кнопкой, и TestToggle.vue, внутри которого находятся два Toggle компонента. Я хочу, чтобы элементы переключения служили своего рода переключателем: за раз можно выбрать только один.

Предполагается, что это должно выглядеть так (одновременно активна только одна кнопка) :

Однако я могу выбрать две кнопки:

что неправильно.

Переключить. vue:

<template>
    <div class="rounded-full m-5 w-40 
                flex justify-center 
                p-2 cursor-pointer"
         :class = "status ? 'bg-green-700 
                             hover:bg-green-600' :
                            'bg-red-700 
                             hover:bg-red-600'"
         v-on:click="status = true">
        <p>{{text}} : {{status}}</p>
    </div>
</template>

<script>
    export default {
        props:  {
            text:  {
                type: String,
                default: ''
            },
            status: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

TestToggle. vue:

<template>
    <div>
        <p>Active: {{activeTab}}</p>
        <Toggle v-on:click = "activeTab = 1"
                text="Toggle 1 "/>
        <Toggle v-on:click = "activeTab = 2"
                text = "Toggle 2"/>
    </div>
</template>

<script>
     import Toggle from '../test/Toggle.vue';

    export default {
        components: {Toggle},

         data: function () {
             return {
                activeTab: 1
            }
        },
        methods: {

        }
    }
</script>

Я думаю, мне нужно установить status = false с TestToggle на Toggle при нажатии другого Toggle? Как я могу это сделать? Или я должен сделать это совершенно по-другому?

Другая проблема в том, что я не могу обновить свойство activeTab data внутри TestToggle компонента: он всегда показывает 1 ...

РЕДАКТИРОВАТЬ :

Я пробовал этот код (как предлагается в ответе), но он просто не работает: кнопки не реагируют на щелчки:

Переключить. vue:

<template>
    <div class="rounded-full m-5 w-40
                flex justify-center
                p-2 cursor-pointer"
         :class = "status ? 'bg-green-700 hover:bg-green-600' :
                            'bg-red-700 hover:bg-red-600'">
    <p>{{text}} : {{status}}</p>
    </div>
</template>


<script>
    export default {
        props:  {
            text:  {
                type: String,
                default: ''
            },
            status: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

TestToggle. vue:

<template>
    <div>
        <p>Active: {{activeTab}}</p>
        <Toggle v-on:click = "activeTab = 1"
                text="Toggle 1 "
                v-bind:status="activeTab === 1"/>
        <Toggle v-on:click = "activeTab = 2"
                text = "Toggle 2"
                v-bind:status="activeTab === 2"/>
    </div>
</template>


<script>
     import Toggle from '.././toggle-so/Toggle.vue';

    export default {
        components: {Toggle},

        data: function () {
            return {
                activeTab: 1
            }
        },
        methods: {

        }
    }
</script>

Answer 1

В Toggle.vue, status объявлено как свойство, поэтому вам не следует изменять его:

<template>
    <div class="rounded-full m-5 w-40 
                flex justify-center 
                p-2 cursor-pointer"
         :class = "status ? 'bg-green-700 
                             hover:bg-green-600' :
                            'bg-red-700 
                             hover:bg-red-600'"
        <p>{{text}} : {{status}}</p>
    </div>
</template>

, но передавать его в Toggle.vue из TestToggle.vue:

<template>
    <div>
        <p>Active: {{activeTab}}</p>
        <Toggle v-on:click.native = "activeTab = 1"
                text="Toggle 1 "
                v-bind:status="activeTab === 1"/>
        <Toggle v-on:click.native = "activeTab = 2"
                text = "Toggle 2"
                v-bind:status="activeTab === 2"/>
    </div>
</template>

Если вы измените status в Toggle.vue, вы сделаете его независимым от любого другого Toggle, но если вам нужно поведение переключателя, каждый статус зависит от других статусов. Вот почему вам нужно управлять if из родительского компонента.

Также необходимо использовать модификатор события native для прослушивания div щелчка дочерних элементов.

Я сделал простой JSFiddle, чтобы показать рабочий пример .