Vue3自定义点击编辑输入组件传入value为null时消失问题求解

1. Vue 模板渲染null、undefined类型的值时会直接输出空内容，当传入组件的value为null/空值时，local变量对应为空，展示状态的<span>标签没有任何文本内容。
2. <span>是原生行内元素，无内容时默认宽高为0，不存在可点击的交互区域，用户无法触发startEdit方法切换到输入框状态，视觉上就表现为组件直接消失。
3. 原有代码还存在不符合单向数据流的隐患：el-input直接绑定了父组件传入的prop属性value，直接修改prop会触发Vue的运行时警告，也可能导致父子组件值不同步的问题。

可以从三个层面修复该问题：

• 给展示状态的span设置最小点击区域，同时增加空值兜底占位文本，保证空值状态下用户也能看到组件、可以点击触发编辑
• 初始化和监听props的value时，对空值做兼容处理，避免local出现null/undefined
• 修正el-input的绑定对象，改为绑定组件内部的local变量，符合单向数据流规范

修改后的完整组件代码如下：

<template>
  <el-input
    v-show="edit"
    ref="inputField"
    type="text"
    placeholder="place"
    v-model='local'
    @blur.native="
      edit = false;
      $emit('input', local);
    "
    @keyup.enter.native="
      edit = false;
      $emit('input', local);
    "
  />

  <span 
    v-show="!edit" 
    @click="startEdit"
    style="display: inline-block; min-width: 24px; min-height: 22px; line-height: 22px; padding: 0 4px;"
  >
    {{ local || '-' }}
  </span>

</template>

<script>
export default {
  props: ["value"],

  data() {
    return {
      edit: false,
      // 空值兜底，把null/undefined转为空字符串
      local: this.value ?? '',
    };
  },

  watch: {
    value: function () {
      // 监听值变化时也做兜底处理
      this.local = this.value ?? '';
    },
  },

  methods: {
    startEdit() {
      this.edit = true;
      this.$nextTick(() => {
        // 加$nextTick保证输入框渲染完成后再聚焦，避免偶现的聚焦失败问题
        this.$refs.inputField.focus();
      })
    },
  },
};
</script>

内容的提问来源于stack exchange，提问作者Sylvain Page