Vue—— Error in v-on handler: “TypeError: Cannot create property ‘display_name‘ on string‘“

原创于 2021-11-25 19:54:47 发布 · 3.2k 阅读

CC 4.0 BY-SA版权

文章标签：

这篇博客讨论了Vue组件中使用v-select时的数据绑定和方法调用问题。作者指出了一个常见的错误，即直接修改`identity_claim.display_name`，并提供了正确的解决方案，即通过设置`this.identity_claim`来更新整个对象。这个例子涉及到Vue的响应式系统和数据模型的正确更新，对于理解和避免Vue应用中的常见陷阱很有帮助。

在这里插入图片描述

<v-select
    v-model="identity_claim"
    :items="identity_claims"
    item-text="display_name"
    item-value="name"
    :readonly="is_readonly"
    :disabled="is_readonly"
    required
    :rules="rules.notNullRules"
    @change="identityChange(identity_claim)"
  >
  </v-select>

之前的错误写法：

export default {
	data(){
	  identity_claim: { display_name: "用户ID(默认)" },
      identity_claims: [],
	},
	methods:{
		identityChange(identity) {
	      this.identity_claim.display_name identity;
       }
    }
}

正确写法：

export default {
	data(){
	  identity_claim: { display_name: "用户ID(默认)" },
      identity_claims: [],
	},
	methods:{
		identityChange(identity) {
	      this.identity_claim = {
	        display_name: identity
	      };
       }
    }
}