Question

我正在为<input>组件编写一个小型包装。我正在关注文档 tutorial。

但是，双向绑定存在问题。我希望我的组件可以与v-model一起使用。绑定似乎可以很好地用于更新值，但是当我更改值本身时，组件不会更新。我还read about transparent wrappers，这似乎是我的问题。

简单的例子：

<template id="numInput" :v-on="listeners">
  <div>
    <!-- note the div here, it works without, but that's not what I want -->
    <input ref:inp type="number" :value="num" @input="updateSelf($event.target.value)" @blur="reset" :class="{rc: isNegative}" />
  </div>
</template>

您可以找到整个代码示例here。

绑定是一种方法（修改文本输入）。但是输入组件不会以其他方式更新（示例中的按钮单击）

欢迎任何帮助！

Answer 1

这里有些错误，但是最基本的是在代码中混合了nom和num。我对您的组件进行了一些重做，然后将您的num数据转换为属性，然后将其绑定到您的主应用程序中。

这是您重新编写的代码...

Vue.config.devtools = true;

// global component registration
Vue.component('num-input', {
  template: '#numInput', 
  props: ['value'],
  computed: {
    isNegative: function() {
      console.log('num: ' + this.value)
      return this.value < 0;
    },
    listeners: function () {
      return this.$listeners;
    },
  },
  methods: {  
    reset () {
      if (this.isNegative) {
        this.$emit('input', 0)        
      }
    }
  },
});

 new Vue({
   el: '#container',
   data: {
     num: 0,
   },
   methods: {
     increaseBy1() {
       this.num++;
       console.log("increased by 1");
     },
   },
 });

要查看代码和html绑定，我分叉了代码笔，可以在...上找到它

https://codepen.io/peterpde/pen/BOVQzg

Vue双向绑定在“透明”包装的输入组件中

1 个答案: