matiastucci/vue-input-tag

tags list is not updated if the v-model is updated after vue-input-tag init

serge1peshcoff opened this issue · 4 comments

serge1peshcoff commented

Version of Vue I'm using?: 2.5.21 (latest from unpkg.me)
Version of vue-input-tag I'm using?: 2.0.1 (latest from unpkg.me)

I couldn't make JSFiddle work, so I'll just post the example to reproduce it here:

HTML:

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="app">
      <input-tag placeholder="Add Tag" v-model="tags"></input-tag>
    </div>
    <script src="https://unpkg.com/vue-input-tag"></script>
    <script src="https://unpkg.com/vue">  </script>
  </body>
</html>

JS

Vue.component('input-tag', vueInputTag.default)

new Vue({
  el: "#app",
  data: {
    tags: ['start', 'data']
  },
  mounted () {
     setTimeout(() => {
       this.data.push('new')
       console.log('pushed new data, data=', this.data)
     }, 1000);
    
    setTimeout(() => {
       this.data = ['new', 'data']
       console.log('updated data, data=', this.data)
     }, 3000);
  }
})

Expected: the <input-tag>'s tags list should be updated.
What happens: it doesn't in both cases.

I've fixed that for myself by just rendering the <input-tag> after the data would be set (in my case it's an HTTP request, not a setTimeout(), but it would be nice to have it auto-updated when I update the prop that I pass as v-model. Is that feasible?

Thanks a lot!

matiastucci commented

Yup, #94 should fix it. Thanks for reporting it.

serge1peshcoff commented

yeah, checked it, works flawlessly for me. Thanks a lot!

AkshatSrivastava2 commented

@matiastucci Didn't work out for me. Any other solution?
Helped me. #84 Thanks anyways.

matiastucci commented

I just merged and released this: #94. Open the issue again if you need.