我在我的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>
每当我按下按钮时,我会得到以下控制台输出:
我做错什么了吗?
2条答案
按热度按时间g0czyy6m1#
您可以尝试使用
:value
和@input
代替v-model
:第一个
3bygqnnd2#
v-model正按预期工作。我只是忘了包括导入: