Ionic 离子Vue 3 - Compositon API -V模型未更新数值

js4nwp54  于 2022-12-08  发布在  Ionic
关注(0)|答案(2)|浏览(158)

我在我的ionic应用程序中使用v-model时遇到了一些问题。在使用双向绑定时,它似乎没有更新数据。请参见我的代码:

<template>
    <form class="ion-padding" @submit.prevent="submitForm">
      <ion-list>
        <ion-item>
          <ion-label position="flaoting">Title</ion-label>
          <ion-input type="text" v-model="enteredTitle" />
        </ion-item>
        <ion-item>
          <ion-label position="flaoting">Image URL</ion-label>
          <ion-input type="url" required v-model="enteredImageUrl" />
        </ion-item>
        <ion-item>
          <ion-label position="flaoting">Description</ion-label>
          <ion-textarea rows="5" v-model="enteredDescription"></ion-textarea>
        </ion-item>
      </ion-list>
      <ion-button type="submit" expand="full">Save</ion-button>
    </form>
  </template>
  
  <script lang="ts">
  import { reactive, toRefs } from 'vue';
  export default {
      setup() {
          const enteredMemoryData = reactive({ 
            enteredTitle: '',
            enteredImageUrl: '',
            enteredDescription: '',
          });
  
          // METHOD
          function submitForm(){
              console.log('Form is getting submitted');
              const memoryData = {
                title: enteredMemoryData.enteredTitle,
                imageUrl: enteredMemoryData.enteredImageUrl,
                description: enteredMemoryData.enteredDescription,
              }
              console.log('Following data will be submitted', memoryData);
          }
          return {
              ...toRefs(enteredMemoryData),
              submitForm
          }
      },
  }
  </script>

每当我按下按钮时,我会得到以下控制台输出:

我做错什么了吗?

g0czyy6m

g0czyy6m1#

您可以尝试使用:value@input代替v-model
第一个

3bygqnnd

3bygqnnd2#

v-model正按预期工作。我只是忘了包括导入:

components: {
  IonList,
  IonItem,
  IonLabel,
  IonInput,
  IonTextarea,
  IonButton,
},

相关问题