how to use multiselect in vuejs?

user_11553487 0
Viewed 57

i want to create a multiselect drop down menu in laravel + vuej js. can someone share a example with me?

<label>Difficulty Level</label>
                        <select
                            v-model="form.difficulty_level"
                            name="difficulty_level"
                            placeholder="Enter  Difficulty Level"
                            class="form-control"
                            :class="{
                                'is-invalid': form.errors.has(
                                    'difficulty_level'
                                )
                            }"
                        >
                            <option value="null" disabled selected
                                >Select Difficulty</option
                            >
                            <option value="Easy">Easy</option>
                            <option value="Medium">Medium</option>
                            <option value="Hard">Hard</option>
                        </select>
laravel vue.js
1 Answers

HTML

<div>
<label class="typo__label">Single select</label>
<multiselect v-model="value" :options="options" :searchable="false" :close-on- 
select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
<pre class="language-json"><code>{{ value  }}</code></pre>
</div>

javascipt 

import Multiselect from 'vue-multiselect'

export default {
components: {
Multiselect
},
data () {
return {
   value: '',
  options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 
  'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 
  'onChange', 'touched']
}
}
}
user_81015510
Related