#vue.js
#vue.js
Вопрос:
Я пытаюсь настроить готовую форму в 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», чтобы показать / скрыть. Это чрезмерное упрощение, и я пропускаю шаги?
Ответ №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>