Vue multiselect без добавления новых тегов

Question

Я использую экземпляр Vue Multiselect с 2 функциями (одна в основном попадает в базу данных для функции автозаполнения, которая работает. Другая добавляет новую, которой нет в базе данных)

Итакскажем, «Tag One» находится в базе данных, если я наберу его, и он покажет, то, нажав Enter или выбрав, сохранит его в тегах (множественный выбор с включенными тегами).Однако, если я наберу «Tag Three», которого нет в базе данных, и нажму клавишу «Ввод» или «Выбрать», он просто исчезнет и не добавится к тегам или не вызовет функцию axios в моем методе addTag.

Что именно я делаю не так?

<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

<div id="tagApp">
  <multiselect
    label="tag_data"
    track-by="campaign_tag_id"
    v-model="value"
    :options="options"
    :multiple="true"
    :taggable="true"
    @tag="addTag"
    @search-change="val => read(val)"
    :preselect-first="false"
    :close-on-select="false" 
    :clear-on-select="true" 
    :preserve-search="true" 
    tag-placeholder="Add this as new tag" 
    placeholder="Search or add a tag"
  ></multiselect>
</div>

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  el: "#tagApp",
  data() {
    return{
        value: [],
        loading: false,
        options: []
    }

  },
  methods: {
    read: function(val){
      if (val) {
        this.loading = true;
        this.options = [];

        const self = this;
        console.log(val);

        axios.get('search',{params: {query: val}})
            .then(function (response) {
                self.options = response.data;
                console.log(response.data);
        });

      } else {
        this.options = [];
      }
    },
    addTag(newTag) {
      const tag = {
        tag_data: newTag,
      };
      const campaign_id = document.querySelector("input[name=campaign_id]").value;

      this.options.push(tag);
      this.value.push(tag);

      axios.post('tags/save',{
            tag_data: newTag,
      })
      .then(function (response){
            console.log(response);
      })
      .catch(function (error) {
            console.log(error);
      });
    }
  }
}) 

Answer 1

Я не думаю, что вы делаете что-то не так, я просто не думаю, что компонент поддерживает то, что вы хотите сделать.

Но вы всегда можете добавить поисковый запрос в массив опций, если его там еще нет. Помещение ниже в обратный вызов axios может быть все, что вам нужно.

self.options = response.data;
self.options.push(val)

Теперь вы можете нарезать его на передний план или держать его нажатым в конце, а также кодировать для предотвращения дублирования и т. Д.