Квазар меняет суффикс электронной почты в зависимости от группы параметров - PullRequest
0 голосов
/ 02 мая 2018

Я пытаюсь изменить суффикс при вводе адреса электронной почты. Вот разные части моего кода:

<q-field
  icon="work"
  label="Institution"
  :label-width="3"
>
  <q-option-group
    type="radio"
    v-model="institution"
    @change="changeInstitution"
    :options="[
      {label: 'Institution 1', value: 'I1', suffix: '@institution1.fr'},
      {label: 'Institution 2', value: 'I2', suffix: '@institution2.fr'}
    ]"
  />
</q-field>
<q-field
  icon="email"
  label="Adresse courriel"
  :label-width="3"
>
  <q-input v-model="email" type="email" suffix="" />
</q-field>

У меня также есть эти строки:

<script>
export default {
  methods: {
    changeInstitution () {
      console.log('Change institution')
    }
  },
  data () {
    return {
      institution: '',
      email: ''
    }
  }
}
</script>

Проблема в том, что когда я меняю выбор «Учреждение», у меня нет ожидаемого журнала («Изменить учреждение»). Вместо этого у меня есть это:

[Vue warn]: Missing required prop: "value"

found in

---> <QInput>
       <QField>
         <QTabPane>
           <QTabs>
             <QModal>
               <QDialog>
                 <Testlogin> at src/components/views/testlogin.vue
                   <QToolbar>
                     <QLayoutHeader>
                       <QLayout>
                         <LayoutDefault> at src/layouts/default.vue
                           <Root>

Может кто-нибудь дать мне подсказку? Я посмотрел документацию (http://quasar -framework.org / components / option-group.html # Установка ), но безрезультатно ...

Заранее спасибо.

1 Ответ

0 голосов
/ 02 мая 2018

Вы используете v-модель. Это эквивалентно

:value="model" @input="(newVal) => model = newVal"

Таким образом, в результате @change не вызывается, поскольку сначала запускается @input, изменяется модель, затем компоненты Quasar сравнивают значение излучения с моделью ... но поскольку @input v-model изменился модель, теперь излучающее значение такое же, поэтому компоненты Quasar пропускают событие @change.

Либо использовать:

  1. v-модель вместе с @ input
  2. «Ленивый» эквивалент v-модели (:value="model" @change="(newVal) => { model = newVal; callSomething...() }")
...