Add new tags to vue-select

Question

In the vue-select vuejs component, if you see on their demo page, you can select multiple items from the dropdown. However, if you type something that is not available in the dropdown, then you can just type that new text and press enter and it will become a tag. You can see this behavior here on their demo page:

https://sagalbot.github.io/vue-select/

However, I am unable to do this. I am able to select from the drop down, but if I type something new, then that doesn't become a tag. I have this jsbin showing what I've done. Any help is appreciated.

http://jsbin.com/xoxohenoli/edit?html,js,output

My Javascript:

Vue.component('v-select', VueSelect.VueSelect);

   new Vue({
      el: '#app',
      data: function() {
        return {
          options: ["A","B"],
          placeholder: 'Choose a country..',
        }
      },

    });

My HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://unpkg.com/[email protected]"></script>
<script src="http://unpkg.com/[email protected]"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app" class="container-fluid">
    <h2>VueSelect Basic Example</h2>
    <v-select :placeholder="placeholder" 
              multiple 
              :options="options"></v-select>
  </div>
</body>
</html>

Hardik Satasiya Hardik Satasiya · Accepted Answer · 2017-12-13T09:05:40

You need to add taggable attribute to the component please check in working example.

please use full page for snippet to avoid overlapping console output.

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app" class="container-fluid">
    <h2>VueSelect Basic Example</h2>
    <v-select taggable :placeholder="placeholder" 
              multiple 
              :options="options"></v-select>
  </div>
  <script>  
  Vue.component('v-select', VueSelect.VueSelect);

   new Vue({
      el: '#app',
      data: function() {
        return {
          options: ["A","B"],
          placeholder: 'Choose a country..',
        }
      },

    });
  </script>
</body>
</html>

Add new tags to vue-select

1 Answers