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设置为单选按钮时该变量的设置。已选择。然后在要显示/隐藏的单独元素上，可以使用带有“ myvalue === true / false”的v-if / v-show进行显示/隐藏。这是一个过分的简化，我缺少步骤了吗？

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>

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

1 个答案: