Question

我有两个组件：Toggle.vue基本上是一个按钮，而TestToggle.vue里面有两个Toggle组件。我希望能够将切换元素用作各种单选按钮：一次只能选择一个。

应该看起来像这样（一次只有一个按钮处于活动状态）：

但是我可以选择两个按钮：

那是不对的。

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组件内的TestToggle数据属性：它始终显示1 ...

编辑：

我尝试了此代码（如答案中所建议），但是它不起作用：按钮对点击没有反应：

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'">
    <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，则使其独立于其他所有切换，但是如果要单选按钮行为，则每个状态都依赖于其他状态。这就是为什么您需要从父组件进行管理。

您还需要使用native event modifier来聆听孩子们的div点击。

我做了一个简单的JSFiddle来显示working example。

Vue：单击时，从父组件更改组件属性，单选按钮

1 个答案: