У меня есть два компонента: 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>