ionicVue3-CompositonAPI-V-model不更新值

我在我的離子應用程式中使用 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> 

每當我按下按鈕時，我都會得到以下控制臺輸出：

難道我做錯了什么？

uj5u.com熱心網友回復：

您可以嘗試使用:valueand@input代替v-model：

const { IonicVue } = '@ionic/vue'
const { reactive, toRefs } = Vue
const app = Vue.createApp({
  setup() {
    const enteredMemoryData = reactive({ 
      enteredTitle: '',
      enteredImageUrl: '',
      enteredDescription: '',
    });
    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', enteredMemoryData);
    }
    return {
      ...toRefs(enteredMemoryData),
      submitForm
    }
  },
})
app.use(IonicVue)
app.mount('#demo')

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <form class="ion-padding" @submit.prevent="submitForm">
    <ion-list>
      <ion-item>
        <ion-label position="flaoting">Title</ion-label>
        <ion-input type="text" :value="enteredTitle" @input="enteredTitle=$event.target.value" />
      </ion-item>
      <ion-item>
        <ion-label position="flaoting">Image URL</ion-label>
        <ion-input type="url" required :value="enteredImageUrl" @input="enteredImageUrl=$event.target.value"  />
      </ion-item>
      <ion-item>
        <ion-label position="flaoting">Description</ion-label>
        <ion-textarea rows="5" :value="enteredDescription" @input="enteredDescription=$event.target.value" ></ion-textarea>
      </ion-item>
    </ion-list>
    <ion-button type="submit" expand="full">Save</ion-button>
  </form>
</div>

uj5u.com熱心網友回復：

v-model 只是按預期作業。我只是忘了包括進口：

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

標籤：Vue.js离子框架Vuejs3vue-composition-api

上一篇：Ionic-Angular與Android上的電容器：所有應用更新必須使用計費庫版本4或更高版本。應用內購買2

下一篇：IonicCapacitorAppeventlistner插件單擊多次呼叫