在输入上使用v-model作为动态ref

Question

我创建了这个处理v-model属性的<input>Vue组件。添加双向数据绑定不是问题，但现在我想将当前输入值添加到状态中。这样我就可以通过修改ref来清除它

clearValue按预期调用，但更新inputValue不会更新UI。我应该怎么做?

<template>
<div>
<input
:id="id"
type="text"
:value="inputValue"
@input="updateValue"
/>
<UiIcon
type="x"
@click.native="clearValue"
/>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from '@nuxtjs/composition-api';
import UiIcon from '~/components/ui/UiIcon.vue';
export default defineComponent({
name: 'UiInput',
components: { UiIcon },
props: {
id: {
type: String,
required: true,
},
value: {
type: String,
default: undefined,
},
},
setup(props, { emit }) {
const inputValue = ref(props.value);
const clearValue = () => {
inputValue.value = '';
};
const updateValue = (event: Event) => {
emit('input', (event.target as HTMLInputElement).value);
};

return {
updateValue,
clearValue,
inputValue,
};
},
});

data() {
return { text: '' };
},
template: `
<div>
<UiInput :id="id" v-model="text" />
</div>
`,

Answer 1

我认为你只需要在clearValue函数中发出空值的'input'事件

emit('input', '');