Vue子组件接收父组件prop后截取字符报undefined错误如何解决

问题排查及修复方案 #

你代码中存在4个明确的错误点，对应修复方案如下：

• 调用了未声明的实例属性：你在计算属性中使用的this.alta_establecimiento没有在props中注册，当前你声明接收的prop只有label和value。如果父组件传递的待截取字段是绑定到value属性的，这里需要改为调用this.value；如果待截取字段名确实是alta_establecimiento，需要先在props中注册该属性。
• 字符串方法大小写错误：JS语法区分大小写，字符串截取方法是substring()（或兼容旧环境的substr()），大写开头的subStr()是不存在的方法，调用会抛出异常。
• 双向绑定缺少setter：v-model会同时读取和修改绑定值，默认声明的计算属性只有getter，修改时会报错，需要完整声明get和set逻辑；如果仅做展示不需要修改，可以把v-model改为value单向绑定，无需setter。
• 缺少边界值兼容：如果父组件传递的prop值为空、undefined或者长度不足4位，直接调用截取方法也会触发undefined报错，需要增加非空判断。

修正后的完整代码 #

<template>
  <div class="form-group">
    <label>{{ label }}</label>
    <div class="form-check form-check-inline">
      <input
        class="form-check-input"
        type="text"
        id="inputAgno"
        v-model="aaaa"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 给props加类型和默认值，避免空值报错
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  computed:{
    aaaa: {
      get() {
        // 先判断值存在再截取
        return this.value ? this.value.substring(0,4) : ''
      },
      set(newVal) {
        // 如果需要同步修改父组件值，这里可以触发自定义事件传值
        // 示例：this.$emit('update:value', newVal) 对应父组件v-model绑定
      }
    },
  }
};
</script>

内容的提问来源于stack exchange，提问作者Santiago Rodriguez