[Vuejs]-Vue – textfield bound value not reflecting actual value

by

1👍

✅

You need to put a key on your TestComponent then each time foo is updated change the key, this should trigger a re-render which is the issue here.

👤Michael

0👍

As per @Michael’s response, the trick was to use key to trigger a re-render.

there’s a new fiddle here , it’s not particularly elegant, I just wanted to get it going first 🙂

Updated elements here:

<div id="app">
  <test-component :key="key" :value="foo" @input="input"></test-component>
</div>


const TestComponent = {
    props: ['value'],
    template: `<div>
    <input type="number" :value="value" @input="update($event.target.value)" />
  </div>`,
  methods: {
    update(value) {
      this.$emit("input", value <= 0 ? 0 : value)
    }
  }
}
new Vue({
  el: "#app",
  components: {
    'test-component': TestComponent
  },
  data: {
    key: 0,
    foo: 1
  },
  methods: {
    input (value) {
      this.foo = value;
      this.key += 1;
    }
  }

})
👤patrickdavey

Leave a comment