Vue3js自定义输入组件消失，如果value=null

Question

我使用以下组件自定义点击编辑输入

<template>
<el-input
v-show="edit"
ref="inputField"
type="text"
placeholder="place"
v-model='value'
@blur.native="
local = $event.target.value;
edit = false;
$emit('input', local);
"
@keyup.enter.native="
local = $event.target.value;
edit = false;
$emit('input', local);"
/>
<span v-show="!edit" @click="startEdit" >  {{ local }}</span>
</template>
<script>
export default {
props: ["value"],
data() {
return {
edit: false,
local: this.value,
};
},
watch: {
value: function () {
this.local = this.value;
},
},
methods: {
startEdit() {
this.edit = true;
this.$refs.inputField.focus();
},
},
};
</script>

我正在使用它，一切似乎都很好。按预期切换到输入。但是如果我传递一个空值，那么渲染的组件就会消失。为什么?如何避免这种情况?

<template>
<ClickEdit :value="'velue-test '" />
</template>

当传递或验证一个空值时，组件将消失。

Answer 1

实际上你的组件正在被渲染(你可以在devtools控制台看到)。但是因为您将空或null作为valueprop传递给组件，所以没有任何内容可以显示用于编辑。因此，您必须设置一个默认文本来显示空值(例如Edit here...)。然后在用户更新输入后替换它。

你可以看到这个codesandbox来理解我的意思。