ionic Vue 3 - 组合 API - V-model 不更新值答案

【问题标题】：ionic Vue 3 - Compositon API - V-model does not update the valuesionic Vue 3 - 组合 API - V-model 不更新值
【发布时间】：2022-10-24 18:20:58
【问题描述】：

我在我的离子应用程序中使用 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>

每当我按下按钮时，我都会得到以下控制台输出：

难道我做错了什么？

【问题讨论】：

如果你使用 Ionic 5 和 Vue 3，你需要 import { IonInput } from '@vue/ionic' 和 v-model 应该可以工作。 Similar issue。如果这不起作用，您也可以按照 Nikola 的回答或this question 或此github issue 中的建议自行添加反应性。
这回答了你的问题了吗？ ionic input v-model is not working in my code
@tao 是的，也不是。这些都是选项 API 相关问题的示例。当我使用组合 API 时。我会尝试找出发生了什么。与此同时，尼古拉的解决方案正在为我工作，因此这不是我想要解决的方式。我仍然想使用 v-model。我将深入探讨这一点。
Options API 和 Composition API 是不同的语法。任何写在一个中的东西都可以写在另一个中。是否可以（或不能）在 Ionic 组件上使用 v-model 与使用的语法没有直接关系。如果它适用于一种语法，它适用于另一种语法，并且反之亦然.如果在 Ionic 组件（它们是 Vue 组件）上实现了 v-model，它就可以工作。这取决于您使用的 Ionic + Vue 版本。根据上面的链接，有些版本无法使用v-model，您必须使用:value 和@change。
@tao 确实。对不起，我做了更多的研究，你是对的。我现在将所有组件添加到每个 vue 页面。那么它可能会起作用。如果是这样，那么你真的帮助了我！

标签： vue.js ionic-framework vuejs3 vue-composition-api

【解决方案1】：

您可以尝试使用:value 和@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>

【讨论】：

【解决方案2】：

v-model 只是按预期工作。我只是忘了包括进口：

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

【讨论】：