laravel - 如何在 vuejs 中使用多选?

标签 laravel vue.js

我想在 laravel + vue js 中创建一个多选下拉菜单。
有人可以和我分享一个例子吗?

<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>

最佳答案

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>
javascript
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']
}
}
}

关于laravel - 如何在 vuejs 中使用多选?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60410051/

相关文章:

html - 删除 Vue 中 html 和 body 元素的边距和填充?

javascript - 为什么我的第一个加载数据 axios 是 return 404 Vue Js?

php - 在 ubuntu 上安装 composer 时遇到问题

php - 操作后如何在表格上保持相同的分页页面

javascript - 有没有办法将项目传递给 VueJS 中另一个组件的对话框?

vue.js - Vuex:如何等待 Action 完成?

javascript - Vue.js - 父范围不更新的模板

php - 我可以向 Laravel 中的 Route::group 添加参数,但在分派(dispatch)到 Laravel 中的路由之前将其删除吗?

jquery - Laravel 4.2 jquery 对象到 Controller

php - Laravel 代客 502 错误网关 nginx/1.15.7