vue-级联表单二级表单无不显示的问题

最新推荐文章于 2024-08-06 17:23:10 发布

startyangu

最新推荐文章于 2024-08-06 17:23:10 发布

阅读量358

点赞数

分类专栏： vue 文章标签： vue.js elementui 前端

原文链接：https://blog.csdn.net/qq_45629145/article/details/124728075?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-124728075-blog-121229605.pc_relevant_3mothn_strategy_recovery&spm=1001.2101.3001.4242.1&utm_relevant_

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在Vue中，对于动态新增的属性，无法直接监听其变化。解决这个问题的方法是使用Vue的$set方法。例如，在一个下拉框选择角色的场景中，当选择项改变时，通过$set更新editObject的role属性，确保数据响应式。如果val存在，则设置editObject.role为val；否则，将其设置为空字符串。

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

原因：

vue无法监听动态新增的属性的变化，需要用$set来为这些属性赋值。

// 下拉框
<el-form-item label="用户角色" prop="role">
   <el-select v-model="editObject.role" :placeholder="selectPlaceholder" @change="handleChange">
      <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">      </el-option>
   </el-select>
</el-form-item>

// 添加handleChange方法


handleChange(val) {

方法一、
this.$forceUpdate();
方法二、手动set
  // val 代表 value 值
  if (val) {    // 操作选中角色发生变化
    this.$set(this.editObject, this.editObject.role, val)
  } else {
    this.$set(this.editObject, this.editObject.role, '')
  }
}