Quasar根据选项组更改电子邮件的后缀

时间:2018-05-02 11:36:33

标签: vue.js quasar quasar-framework

我在更改选项时尝试在电子邮件输入中进行后缀更改。 以下是我的代码的不同部分:

<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>

问题在于,当我改变&#34; Institution&#34;选择,我没有预期的日志(&#34;变更机构&#34;)。相反,我有这个:

[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#Installation),但无济于事......

提前致谢。

1 个答案:

答案 0 :(得分:1)

您正在使用v-model。这相当于

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

因此,因为@change不会被调用,因为首先发出@input,更改模型,然后Quasar组件将发射值与模型进行比较......但是由于v-model的@input已更改模型,现在发射值相同,因此Quasar组件跳过@change事件。

使用:

  1. v-model和@input
  2. v-model(:value="model" @change="(newVal) => { model = newVal; callSomething...() }"
  3. 的“懒惰”等价物