I'm using VueJS Multiselect and when I make a selection from the drop-down menu the other options disappear. How can I choose multiple options?

Also, how do I remove the [] (square brackets) from displaying at the

You selected: {{ value }}

  <template>
  <div >
    <div >
      <div >
        <div>
          <Multiselect
            v-model="value"
            :options="posts"
            mode="tags"
            :multiple="true"
            label="title"
          />
        </div>
        <p>You selected: {{ value }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Multiselect from "@vueform/multiselect";

export default {
  components: {
    Multiselect,
  },
  data: function () {
    return {
      posts: [],
      id: [],
      value: [],
    };
  },
  created() {
    this.getPosts();
  },
  methods: {
    getPosts() {
      axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then((response) => {
          // eslint-disable-next-line
          console.log(response);
          this.posts = response.data;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.log(error);
        });
    },
  },
};
</script>

<style src="@vueform/multiselect/themes/default.css"></style>

CodePudding user response：

Try this way :

new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      },
    posts: [
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      },
      {
        "userId": 1,
        "id": 2,
        "title": "qui est esse",
        "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
      },
      {
        "userId": 1,
        "id": 3,
        "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
        "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
      },
      {
        "userId": 1,
        "id": 4,
        "title": "eum et est occaecati",
        "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
      }]
  },
  methods: {
    customLabel (option) {
      return option.title
    }
  }
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css"/>

<div id="app">
  <template>
<multiselect 
             v-model="value" 
             :options="posts"
             :multiple="true"
             track-by="id"
             :custom-label="customLabel"
             >
</multiselect>
<pre>{{ value }}</pre>
  </template>
</div>