vue.js显示/隐藏基于单选按钮选择的输入字段

Question

我正试图在Vue.js中自定义一个开箱即用的表单，其中的输入显示/隐藏取决于两个单选按钮的选择：

<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>

我在数据中定义了isOperator(我定义数据正确吗？我正在尝试修改开箱即用的代码，不确定这意味着什么(：

export default {
name: 'User-Details',
components: {...},
props: {...},
data () {
let data = {
...
isOperator: true,
...
};

我正试图让这个显示/隐藏一个按钮和输入字段。我从按钮开始，因为它看起来更简单：

<b-button v-show="isOperator === true" @click="save" :block="true" size="lg" variant="primary" active-class="ssrv-form-button" class="ssrv-form-button">
{{$t("common.form.signUp")}}
</b-button>

我目前的问题是，该按钮没有根据两个单选按钮显示/隐藏。如果我在数据中设置isOperator: true，页面加载时会选择第二个单选按钮并显示按钮。当我点击第二个单选按钮时，它消失了。但是，当我再次单击原来的单选按钮时，该按钮不会重新显示。当我尝试显示/隐藏输入字段时，我会得到同样的结果，我可以通过将isOperator设置为true来使其最初显示，但当我选择另一个单选按钮使其消失时，我无法使其再次出现。如果isOperator设置为false，它就永远不会显示。

我放了一个isOperator is {{ isOperator }}p元素，我可以看到值如预期的那样更改为true/false，但按钮/输入没有显示出来。

根据我对Vue.js的有限理解，我将v-model设置为我希望元素修改的变量，并将value设置为选择单选按钮时该变量的值。然后在我想要显示/隐藏的单独元素上，我可以使用v-if/v-show和"；myvalue＝＝真/假"；显示/隐藏。这是不是过于简单化了，我错过了步骤？

Answer 1

这是因为isOperator属性的类型不匹配。当您第一次装载组件时，isOperator的值是布尔值(true(，然后当您单击单选按钮时，它将变为字符串。您需要调整模板中的value属性，如下所示：

<b-form-group label-class="ssrv-form-control">
<div class="ssrv-5">
<b-form-radio v-model="isOperator" name="operatorRad" :value="false">Consultant</b-form-radio>
</div>
<div class="ssrv-0">
OR
</div>
<div class="ssrv-1 rad">
<b-form-radio v-model="isOperator" name="operatorRad" :value="true">{{ userDetails.operator.description }}</b-form-radio>
</div>
</b-form-group>