从商店的状态更新 v-model

Question

我有一个输入字段组件，每当该字段失去焦点或每当用户按下 Escape 按钮时，我都会尝试重置该组件。 然而，来自商店状态的 v-model 永远不会更新，这是为什么呢？ 这也是处理输入组件的正确方法吗？

输入子组件：

<template>
 <ion-input
  placeholder="Name"
  :modelValue="modelValue"
  @ionInput="editedName= $event.target.value;"
  @ion-focus="currentName = modelValue"
  @keydown.esc="$emit('update:modelValue', currentDocument)"
  @ion-blur="$emit('update:modelValue', currentDocument)"
/>
</template>
<script setup lang="ts">
import {IonInput} from "@ionic/vue";
import { onBeforeMount, ref } from "vue";
  
interface Props {
  id: string;
  modelValue: string;
}
const props = defineProps<Props>();

const currentDocument = ref();
const editedDocument = ref();
const edit = ref(false)
</script>

这就是我在父组件上使用它的方式：

<template>
 <ItemField
  :id="data.id"
  v-model="data.name"
 />
</template>
<script setup lang="ts">
import ItemField from '@/components/admin/ItemField.vue'
import {myStore} from '@/stores/myStore'
import { storeToRefs } from 'pinia'
import { spaceType } from "@/types";

const store = myStore()
const { data} = storeToRefs(store );
</script>

我到底做错了什么？

Answer 1

首先，根据

ionic docs

，:modelValue不是一个属性，它应该是

:value

<ion-input
  :value="modelValue"
/>

其次，您没有包含足够的代码来解释这些行

@ionInput="editedName= $event.target.value;"
@ion-focus="currentName = modelValue"

什么是

editedName

和

currentName

？它们是如何使用的？你在某处发出 editedName 吗？将此输入值绑定到您的商店的最简单代码是

@ionInput="$emit('update:modelValue', $event.target.value)"

@keydown.esc

和

@ion-blur

事件在我看来是正确的，它们应该将商店 data.name 值设置为未定义（如果这是您的目标）。您只需要确保

@ionInput

的价值正在成功运作，希望我上面的建议能有所帮助。