this.$set

created: function () { 
  this.todo.isCheck = true; // 不响应
}

<template>
  <div id="app">
    <!-- <img width="25%" src="./assets/logo.png">
    <HelloWorld/>-->
    <div>
      {{ todo.item }}
      <input type="checkbox" v-model="todo.isChecked">
    </div>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    // HelloWorld
  },
  data: function() {
    return {
      todo: {
        item: "买苹果",
        isChecked: false
      }
    };
  },
  created: function() {
    // this.todo.isChecked = true;
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

this.$set.gif

https://codesandbox.io/s/7w51507601

v-model 自动转字符串

在 v-model 后添加 .number 修饰符即可解决问题。

<FormItem>
  <Input v-model.number="randomSampling.sampleNum" placeholder="请输入取样条数" style="width: 270px"/>
</FormItem>

.number修饰符v-model.gif

this.$nextTick

this.instanceItem = [];

            // debugger

            this.$nextTick(function () {
              console.log(222);
              debugger
              this.instanceItem = [{"data":"HIVE","left":"108","top":"48","uniqueId":"hiveExtract458527","currentDrag":"458527","processParams":{"data":{"schema":{},"data":{}},"processId":"hiveExtract458527","status":"","errorLog":"","hiveExtract":{"databaseName":"it_import","tableName":"dag_run"}}},{"data":"切片","left":"603","top":"160","uniqueId":"slice462135","currentDrag":"462135","processParams":{"data":{"schema":{},"data":{}},"processId":"slice462135","status":"","errorLog":"","slice":{"startCol":0,"endCol":2,"startRow":0,"endRow":2}}}]

              this.$nextTick(function () {
                debugger
                this.instanceItem = [];

                this.$nextTick(function () {
                  debugger
                  this.instanceItem = [{"data":"HIVE","left":"108","top":"48","uniqueId":"hiveExtract458527","currentDrag":"458527","processParams":{"data":{"schema":{},"data":{}},"processId":"hiveExtract458527","status":"","errorLog":"","hiveExtract":{"databaseName":"it_import","tableName":"dag_run"}}},{"data":"切片","left":"603","top":"160","uniqueId":"slice462135","currentDrag":"462135","processParams":{"data":{"schema":{},"data":{}},"processId":"slice462135","status":"","errorLog":"","slice":{"startCol":0,"endCol":2,"startRow":0,"endRow":2}}}]
                });
              });
            });

vuejs_$nextTick.gif

v-bind:key

连线错误

:key 改为 item.uniqueId 后解决问题了。

key 写成 index 真的是害死人！！！

wrapped function failed : TypeError: Cannot read property 'length' of null

v-bind_key_连线错误.gif 连线错乱的问题——规律_key改为唯一和index的差别.gif

this.$emit

this.$emit("on-change-name", name); // 执行

this.$nextTick(() => {
  this.$emit("on-change-color" ,color); // 不执行，怎么都不执行！！！
});

this.$emit("on-change-name", name); // 执行
this.$emit("on-change-color" ,color); // 也会执行

watch 深度监听对象变化

不要直接改 newVal

会接连触发两次，第二次会提示 columnList 不存在 split 方法！！！用一个中间变量存

watch: {
  data(newVal, oldVal) {
    newVal.columnList = newVal.columnList.split(",")

    this.updateProgress(newVal)
    // this.updateProgress({ newVal: tempVal })
  }
}

iview input 按 enter 刷新页面的问题

解决办法：

给 Form 添加阻止默认行为

<Form v-show="close" style="padding: 24px;" @keydown.native.enter.prevent/>