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

最新推荐文章于 2024-03-09 14:17:14 发布

贝塔贝卡贝

最新推荐文章于 2024-03-09 14:17:14 发布

阅读量3.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Kiruthika/article/details/121545875

版权

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

摘要由CSDN通过智能技术生成

在这里插入图片描述

<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
	      };
       }
    }
}