切换列表以根据选定的单选按钮显示

Question

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

所有州
select 状态
除以下州外的所有州...

我希望状态列表在 select 'select states' 或 'all states except the following' 时向用户显示。

这是我尝试过但无法正常工作的方法：

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}}

我怎样才能使状态 div 仅在我单击两个单选按钮时显示？

Answer 1

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

切换列表以根据选定的单选按钮显示

Toggle list to display based on selected radio button

toggle

vue.js

pug