Ionic Vue 3 - Compositon API - V-модель не обновляет значения
У меня возникли проблемы с использованием v-модели в моем ионном приложении. Кажется, что данные не обновляются при использовании двусторонней привязки. Смотрите мой код:
<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.info('Form is getting submitted');
const memoryData = {
title: enteredMemoryData.enteredTitle,
imageUrl: enteredMemoryData.enteredImageUrl,
description: enteredMemoryData.enteredDescription,
}
console.info('Following data will be submitted', memoryData);
}
return {
...toRefs(enteredMemoryData),
submitForm
}
},
}
</script>
Всякий раз, когда я нажимаю кнопку, я получаю следующие выходные данные консоли:
Я делаю что-то неправильно?
Отвечает ли это на ваш вопрос? v-модель ионного ввода не работает в моем коде
@тао Да и нет. Это все примеры вопросов, связанных с API опций. Пока я использую API композиции. Я постараюсь выяснить, что происходит. Тем временем решение Николы работает для меня, поэтому я не хочу, чтобы оно было решено. Я все еще хочу использовать v-модель. Я углублюсь в это немного больше.
Options API и Composition API — это разные синтаксисы. Все, что написано в одном, может быть записано в другом. Можете ли вы (или не можете) использовать v-model в компонентах Ionic, это не имеет прямого отношения к используемому синтаксису. Если он работает в одном синтаксисе, он работает и в другом, и наоборот. Это работает, если v-model был реализован на компонентах Ionic (которые являются компонентами Vue). Это зависит от версии Ionic + Vue, которую вы используете. По ссылкам выше есть версии, в которых использование v-model невозможно, придется использовать :value и @change.
@тао действительно. Мне жаль, что я провел дополнительное исследование, и вы правы. Теперь я добавляю на каждую страницу vue все компоненты. Тогда может случиться так, что это сработает. Если да, то вы мне очень помогли!
Ответы 2
Вы можете попробовать использовать :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.info('Form is getting submitted');
const memoryData = {
title: enteredMemoryData.enteredTitle,
imageUrl: enteredMemoryData.enteredImageUrl,
description: enteredMemoryData.enteredDescription,
}
console.info('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>v-модель работает как положено. Я просто забыл включить импорт:
components: {
IonList,
IonItem,
IonLabel,
IonInput,
IonTextarea,
IonButton,
},
Если вы используете Ionic 5 и Vue 3, вам нужно
import { IonInput } from '@vue/ionic'иv-modelдолжно работать. Аналогичная проблема . Если это не сработает, вы также можете сами добавить реактивность, как это предлагается в ответе Николы, или этот вопрос , или этот выпуск github.