Vue.js 切换列表以基于选定单选按钮显示

我有一段代码询问用户他们想在哪里显示他们的广告。选项是，我把它们作为单选按钮：

所有国家 选择州 除以下州外的所有州。。。 我希望当用户选择“选择状态”或“除以下以外的所有状态”时，状态列表会显示给用户

这是我尝试过但无法实现的功能：

showStates: boolean = false;


.form-check
input.form-check-input(type="radio")  
label All States  

.form-check
input.form-check-input(type="radio" @click='showStates  = !showStates')   
label all states except except:  

.form-check
input.form-check-input(type="radio" @click='showStatus = !showStates')  
 label selected states:

查看页面

(div to show states)
.collapse.container(v-show='showStates')

Select states.
 .col-6(v-for='location in locationList')
.form-check
input.form-check-input(type='checkbox')
label.form-check-label {{location.name}}

---

我如何才能得到这样的结果，使states div仅在我单击两个单选按钮时显示？

单选按钮仅发出更改事件。尝试使用@change而不是@click。

添加您为实现目标所做的一切it@varit05是的。。我创建了一个变量boolean，默认情况下将其设置为false，并添加了单击按钮切换boolean，并使用v-show尝试显示div…如上所述，但它不工作vue devtools中的ShowStatus更改？我认为你应该使用@input或@change而不是@click