报错如下:

错误代码

// 表格序号
          let nosort = 0
          for(let n in this.spanArr){
            if(this.spanArr[n]>0){
              nosort += 1
              this.$set(this.list[n],'nosort',nosort)
              this.$forceUpdate()
            }
          }

解决办法:通过对象打点的方式给对象添加属性。

// 表格序号
          let nosort = 0
          for(let n in this.spanArr){
            if(this.spanArr[n]>0){
              nosort += 1
              // this.$set(this.list[n],'nosort',nosort)
              this.list[n].nosort=nosort;
              this.$forceUpdate()
            }
          }

为什么要用this.$set?

当发现我们给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到。

官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,

实际使用案例:

(1)、子组件点击选中按钮,触发父组件的方法并传值

choose(row) {
                this.dialogDialogVisible = false
                this.$emit('selectOneProduct', row)
            }

(2)、父组件监听并接收子组件传递过来的值

<product-dialog @selectOneProduct='selectOneProduct' ref="product-dialog" />

(3)、父组件的方法:

selectOneProduct(row) {
        this.$set(this.ruleForm, 'productName', row.productName)
        this.ruleForm.id = row.id
      },

(4)、父组件显示对象中的属性

<el-row>
          <el-col :span=24>
            <el-form-item v-if="ruleForm.pointType=='2'" label="产品名称:" prop="productName">
              <el-input v-model="ruleForm.productName" :readonly="titleStatus=='update'" clearable>
                <template slot="append">
                  <el-button type="success" @click="selectProduct">选择</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

效果:

 

posted on 2022-09-14 17:17  周文豪  阅读(2153)  评论(0编辑  收藏  举报