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

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

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

导出默认值{
方法：{
变革机构（）{
console.log（'Change institution'）
}
},
数据（）{
返回{
机构：''，
电子邮件：“”
}
}
}

问题是，当我更改“机构”选项时，我没有预期的日志（“更改机构”）。相反，我有：

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

[Vue warn]：缺少必需的属性：“值”
发现于
---> 
在src/components/views/testlogin.vue
在src/layouts/default.vue处

谁能给我一个提示吗？我查看了文档（），但没有结果

---

提前感谢。

您使用的是v型。这相当于

：value=“model”@input=“（newVal）=>model=newVal”

因此，结果是，@change不会被调用，因为@input首先被发射，改变模型，然后类星体组件将发射值与模型进行比较。。。但是由于v-model的@input改变了模型，现在发射值是相同的，所以类星体组件跳过@change事件

或使用：

v型以及@input

v-model的“惰性”等价物（

：value=“model”@change=“（newVal）=>{model=newVal；callSomething…（）}”

）

---

你用的是v型。这相当于

：value=“model”@input=“（newVal）=>model=newVal”

因此，结果是，@change不会被调用，因为@input首先被发射，改变模型，然后类星体组件将发射值与模型进行比较。。。但是由于v-model的@input改变了模型，现在发射值是相同的，所以类星体组件跳过@change事件

或使用：

v型以及@input

v-model的“惰性”等价物（

：value=“model”@change=“（newVal）=>{model=newVal；callSomething…（）}”

）