$set在vue中的应用案例

vue中this.$set在官方API中是这样说的：

Vue.set( target, propertyName/index, value )

参数：

{Object | Array} target

{string | number} propertyName/index

{any} value

返回值：设置的值。

用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

-------看不懂？说实话，遇到问题之前自己也不懂，耐心接着往下看

在vue中，为了解决动态渲染数据问题，使用数组作为唯一标识，以下案例只使用了一个disable，在实际应用中可以同时设置多个变量用来动态渲染和用作区分标识。话不多说，看组件demo，用的element-ui框架。

<template>
  <div class="demo">
    <h1>vue中$set应用案例</h1>
    <div class="demo1">
      <el-table :data="tabdata" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="age" label="年龄" width="180"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
      </el-table>
    </div>
    <div class="demo2">
      <ul>
        <li v-for="(item, index) in tabdata" :key="index">
          <div>
            <div class="front">姓名：</div>
            <el-input size="mini" v-model="item.name" :disabled="!disabled[index]"></el-input>
          </div>
          <div>
            <div class="front">年龄：</div>
            <el-input size="mini" v-model="item.age" :disabled="!disabled[index]"></el-input>
          </div>
          <div>
            <div class="front">性别：</div>
            <el-input size="mini" v-model="item.gender" :disabled="!disabled[index]"></el-input>
          </div>
          <div>
            <el-button size="mini" type="primary" v-if="!disabled[index]" @click="edit(index)">修改</el-button>
            <el-button
              size="mini"
              type="success"
              v-if="disabled[index]"
              @click="sub(index,item.name,item.age,item.gender)"
            >确定</el-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabled: [],
      tabdata: [
        {
          name: "陈萍萍",
          age: "48",
          gender: "男"
        },
        {
          name: "范思哲",
          age: "12",
          gender: "男"
        },
        {
          name: "范若若",
          age: "16",
          gender: "女"
        },
        {
          name: "范闲",
          age: "18",
          gender: "男"
        },
        {
          name: "言冰云",
          age: "18",
          gender: "男"
        },
        {
          name: "司理理",
          age: "17",
          gender: "女"
        },
        {
          name: "林婉儿",
          age: "17",
          gender: "女"
        },
        {
          name: "圣女",
          age: "18",
          gender: "女"
        }
      ]
    };
  },
  methods: {
   
    edit(index) {
      //修改操作状态
      this.$set(this.disabled, index, !this.disabled[index]);
    },
    sub(index, name, age, gender) {
      //获取已经修改的值
      console.log(index, name, age, gender);
      this.$set(this.disabled, index, !this.disabled[index]);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    }
  }
};
</script>
<style lang="scss">
#demo {
  width: 100%;
  height: 100%;
  float: left;
}
.demo1 {
  float: left;
  width: 40%;
  margin: 0 auto;
}
.demo2 {
  float: left;
  width: 40%;
  margin: 0 auto;
  ul {
    list-style: none;
    line-height: 20px;
    li {
      width: 240px;
      margin: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ff6600;
      float: left;
      input {
        float: left;
      }

      .front {
        width: 60px;
        float: left;
      }
    }
  }
}
.el-input {
  float: left;
  width: 180px;
}
</style>

 

效果展示：