Vue multiselect не позволяет создавать новые теги - PullRequest
Новая
       20

Vue multiselect не позволяет создавать новые теги

0 голосов
/ 11 апреля 2019

У меня есть в основном работающий мультиселект Vue, в котором я использую функцию автозаполнения через вызов axios в базу данных. Что касается возврата результатов БД и добавления их в качестве параметров, а затем тегов, он работает отлично.

Моя проблема в том, что я не могу создавать новые теги. Поэтому, если мой вызов axios возвращает «Testing one» в качестве опции, и я выбираю его, он становится тегом. Тем не менее, если результаты не возвращаются, когда я набираю «новый тест» и нажимаю клавишу ввода, он не становится новым тегом.

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

<div id="tagApp">
<multiselect
  label="tag_data"
  track-by="campaign_tag_id"
  v-model="value"
  :options="options"
  :loading="loading"
  :multiple="true"
  :taggable="true"
  @search-change="val => read(val)"
></multiselect>
</div>

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

},
methods: {
  read: function(val){
      //console.log('searched for', val);
    if (val) {
      this.loading = true;
      this.options = [];

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

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

    } else {
      this.options = [];
    }
  }
}
})

1 Ответ

1 голос
/ 11 апреля 2019

Я предлагаю вам прочитать их документацию ... Все, что вам нужно, есть там ... вы должны добавить taggable, а также обработать творения с помощью @tag="handleTagMethod"

Зеркало CodePen: https://codepen.io/oze4/pen/ROVqZK?editors=1010

Vue.component("multiselect", window.VueMultiselect.default);

new Vue({
  el: "#app",
  data: {
    value: [],
    options: []
  },
  methods: {
    addTag(newTag) {
      const tag = {
        title: newTag,
        // you'll need to add other items specific to your objects        
      };
      this.options.push(tag);
      this.value.push(tag);
    }
  },
  mounted() {
    var self = this;
    axios
      .get("https://jsonplaceholder.typicode.com/todos?_start=1&_end=10")
      .then(response => {
        self.options = response.data;
      })
      .catch(error => {
        alert(error);
      });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<div id="app">
  <div style="width: 600px">
  <label class="typo__label">Simple select / dropdown</label>
  <multiselect 
    v-model="value" 
    :height="300"
    :options="options" 
    :multiple="true" 
    :taggable="true"
    :close-on-select="false" 
    :clear-on-select="false" 
    :preserve-search="true" 
    tag-placeholder="Add this as new tag" 
    placeholder="Search or add a tag"
    @tag="addTag"
    label="title" 
    track-by="title" 
    :preselect-first="false"
  >
    <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
  </multiselect>
  <pre class="language-json"><code>{{ value }}
...