VUE中 input双向绑定的v-model jsx写法 input的值无法清空 如何解决?

Question

<script>
export default {
  name: "Input",
  components: {},
  data() {
    return {
      value_1: "123",
      value_2: "321"
    };
  },
  created() {},
  methods: {
    defaultDom() {
      return (
        <div>
          <input vModel={this.value_1} />
          <button onclick={this.defaultClear}>清空</button>
        </div>
      );
    },
    defaultClear() {
      this.value_1 = "";
    },
    jsxDom(h) {
      return h("div", [
        h("input", {
          attrs: {
            value: this.value_2
          },
          on: {
            input: e => {
              this.value_2 = e.target.value;
            }
          }
        }),
        h("button", { on: { click: this.jsxClear } }, ["清空"])
      ]);
    },
    jsxClear() {
      this.value_2 = "";
    }
  },
  render(h) {
    let inputDOM_1 = this.defaultDom();
    let inputDOM_2 = this.jsxDom(h);
    return h("div", [
      inputDOM_1,
      h("p", [this.value_1]),
      inputDOM_2,
      h("p", [this.value_2])
    ]);
  }
};
</script>

<style lang="less" scoped></style>

如上图所示 分别有两个Input的写法
1:defaultDom 直接利用vModel来双向绑定input的值
2:jsxDom 利用on:input 来进行双向绑定

如果在input 直接改变的时候 双向绑定是成功的
但是 当为每个input 添加了一个清空Input的Button之后
jsxDom的Button 执行了 jsxClear 如果值不改变可以清空值
但是如果操作步骤是
先改变 此Input的值 再点击清空按钮
这时候就无法清空input的内容了

请问这种情况是什么原因,如果要用 h()
应该怎么写才对?

Answer 1

https://cn.vuejs.org/v2/guide...