V-model not updating while removing a value from SemanticUI multiselect dropdown when allowAdditions is true

Question

V-model is not updating when we remove a value from Semantic UI multiselect search dropdown.

If we enter any value that is not present in the dropdown and press enter/tab then the value is added to the array normally but when we remove this value it doesn't get deleted from the array. However, it works fine if we remove any of the values that were selected from the dropdown options.

Here is my code:

new Vue({
  el: "#app",
  data: {
		lists:[]
  },
})
$('.ui.dropdown')
    .dropdown({
        allowAdditions: true,
    });

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" />

<div id="app">
  <h3>Selected values: {{lists}}</h3>
  <select name="skills" multiple="" v-model="lists" class="ui search fluid dropdown">
  <option value="">Skills</option>
  <option value="Angular">Angular</option>
  <option value="CSS">CSS</option>
  <option value="HTML">HTML</option>
</select>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>

Follow the steps to recreate the example:

1. Click on the dropdown to see the options
2. Select 'Angular', 'CSS' and 'HTML' one by one
3. After selecting, enter 'Abcd' in the dropdown and press tab or enter (Pillbox for this value will be created)
4. Now you will see 4 values in the array
5. Remove 'Angular' and 'CSS' by clicking on the Remove(x) icon - These will be removed from array too automatically
6. Now remove 'Abcd' - This wont get removed until we add or remove any values that are present in the dropdown.

Can someone help please?

Answer 1

I would recommend using the vue-semantics given by semantics itself because this seams like options and selected values are binded properly in backend, but meanwhile here is a work around to tighten this use case.

Just use the onRemove callback to remove the unselected element from the list. This will ensure that the element is removed successfully.

new Vue({
  el: "#app",
  data: {
		lists:[],
    options : ["Angular", "CSS", "HTML"]
  },
  mounted: function(){
    $('.ui.dropdown').dropdown({
      allowAdditions: true,
      onRemove : (removedValue, removedText, $removedChoice) => {
        this.verifySelected(removedValue);
      }
    });
  },
  methods : {
    verifySelected : function(removedValue){
      var index = this.lists.indexOf(removedValue);
      if(index > -1){
          this.lists.splice(index, 1);
          console.log(this.lists);
      }

    }
  }
})