2

I'm trying to update the semantic ui dropdown with new values. Vue is correctly being updated and I'm refreshing the semantic ui dropdown but it still isn't updating. I saw another post which mentioned the use of key, but it still fails.

Template 

<div id=root>
  <label>Type:</label>
  <select id="app_type" class="ui search selection dropdown" v-model="model_type_val">
    <option v-for="model_type in model_types" v-bind:value="model_type.value" v-bind:key="model_type.value">{{model_type.text}}</option>
  </select>
  <p>
    selected: {{model_type_val}}
  </p>
</div>

Code

var model_types2= [
  {value:"",text:"Type"},
  {value:"type1",text:"Type1a"},
  {value:"type2",text:"Type2a"},
  {value:"type3",text:"Type3a"},
  {value:"type4",text:"Type4"}      
];

var vm2= new Vue({
  el:'#root',
  data:{
    model_type_val:"",
    model_types:[
      {value:"",text:"Type"},
      {value:"type1",text:"Type1"},
      {value:"type2",text:"Type2"},
      {value:"type3",text:"Type3"}
    ]
  },
  mounted: function(){
    $('#app_type').dropdown();
    setTimeout(function() {
      this.model_types=model_types2;
      alert(this.model_types[1].text);
      $('#app_type').dropdown('refresh');              
    }, 1000);
  }
});

I've tried to reproduce the code in this jsfiddle.

Bert
  • 80,741
  • 17
  • 199
  • 164
user2265754
  • 79
  • 2
  • 8

1 Answers1

2

You have a this problem. When you have a callback inside a Vue method or lifecycle hook in which you use this, you need to make sure that this points to the correct object (the Vue). You do that with an arrow function, a closure, or bind.

setTimeout(() => {
  this.model_types=model_types2;
  $('#app_type').dropdown('refresh');              
}, 1000);

Here is your fiddle updated.

Note: In the fiddle, I also converted your selector to use a ref. Typically you want to start weaning yourself off jQuery when working with Vue.

See How to access the correct this inside a callback.

Bert
  • 80,741
  • 17
  • 199
  • 164
  • Awesome, thanks! I like the jquery tip too. I haven't used ref before. I've been using jquery for so long, it's my default when trying to write something quick. I was hoping to escape it when moving to vue; but semantic uses it. :) – user2265754 Jul 13 '17 at 02:57
  • I've altered your jsfiddle to remove the last element and change only the text for one of the entries. Do you know why it doesn't update? https://jsfiddle.net/tvinci/5dkb2r62/ – user2265754 Jul 13 '17 at 03:06
  • @user2265754 It's believe it's because of the `key`, `model_type.value`. By using that as a key and replacing the options with a list that has the same `key`, Vue is re-using the original. Seems weird that didn't also happen before. I've changed [updated the code](https://jsfiddle.net/5dkb2r62/1/) though and removed a few lines I don't think are necessary. – Bert Jul 13 '17 at 03:31
  • Perfect! This was my original issue which I was unable to reproduce in the first jsfiddle. :) I spent hours trying to figure out what was wrong. This is my first time with Vue and Semantic. I'm trying to switch from getuikit and jquery. – user2265754 Jul 13 '17 at 10:52