Блог

Я пытаюсь настроить готовую форму в Vue.js где входные данные отображаются / скрыты в зависимости от выбора 2 переключателей:

 <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 данные, страница загрузится с выбранным 2-м переключателем и отображением кнопки. Когда я нажимаю второй переключатель, он исчезает. Но затем, когда я снова нажимаю исходный переключатель, кнопка не отображается обратно. Я получаю тот же результат, когда пытаюсь показать / скрыть поле ввода, я могу заставить его отображаться изначально, установив isOperator значение true, но затем, когда я выбираю другой переключатель, чтобы заставить его исчезнуть, я не могу заставить его появиться снова. Если isOperator установлено значение false, оно просто никогда не отображается.

Я помещаю isOperator is {{ isOperator }} элемент p и вижу, что значение меняется на true / false, как и ожидалось, но кнопки / входы не отображаются обратно.

Из моего очень ограниченного понимания Vue.js Я устанавливаю v-model значение переменной, которую я хочу изменить для элемента, и value значение, на которое будет установлена эта переменная при выборе переключателя. Затем для отдельного элемента, который я хочу показать / скрыть, я могу использовать v-if / v-show с «myvalue === true / false», чтобы показать / скрыть. Это чрезмерное упрощение, и я пропускаю шаги?

Это из-за несоответствия типа 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>