Vue警告：NewParticipant未在实例定义但渲染时被引用如何解决

问题原因 #

你在SelectableAttribute上绑定的:model-name="NewParticipant"使用了v-bind语法（属性名前的冒号:就是v-bind的简写），Vue会把属性值当做当前组件实例的JS变量去解析查找，你没有在组件内定义NewParticipant这个变量，所以触发了报错。

解决方案 #

分两种场景处理： #

场景1：NewParticipant是固定字符串常量

选任意一种改法即可：

• 去掉属性名前的冒号，直接传静态字符串：

model-name="NewParticipant"

• 保留冒号的话，给值套一层单引号，声明为字符串字面量：

:model-name="'NewParticipant'"

场景2：NewParticipant是需要动态更新的变量

不需要直接声明在props里，除非这个值是父组件传递给当前组件的：

• 如果是组件内部自用的动态值，定义在data配置项即可：

export default {
  props: {
    participants: {
      type: Array,
      default: null
    },
  },
  // 新增data定义变量
  data() {
    return {
      NewParticipant: '你的动态取值' // 按实际业务需求赋值即可
    }
  },
  components: {
    SelectableAttribute
  },
}

• 如果这个值是父组件传给当前组件的，才需要在props里新增声明：

props: {
  participants: {
    type: Array,
    default: null
  },
  // 新增props定义
  NewParticipant: {
    type: String, // 可根据实际值类型调整为Number等
    required: true
  }
}

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