vue-multiselect in laravel不起作用
vue-multiselect是一个基于Vue.js的多选下拉框组件，它提供了丰富的功能和灵活的配置选项。在Laravel框架中使用vue-multiselect时，如果出现不起作用的情况，可能是以下几个原因导致的：
- 引入问题：首先要确保正确引入了vue-multiselect组件。可以通过在页面中查看源代码或使用浏览器开发者工具来确认是否成功引入了相关的CSS和JavaScript文件。
- 组件注册问题：在使用vue-multiselect之前，需要在Vue实例中注册该组件。在Laravel中，可以在app.js或其他相关的JavaScript文件中使用Vue.component()方法进行注册。确保已正确注册vue-multiselect组件。
- 数据绑定问题：vue-multiselect是一个双向绑定的组件，需要通过v-model指令将选中的值与数据进行绑定。在Laravel中，可以通过在Vue实例的data属性中定义一个变量，并将其与v-model指令绑定，来实现数据的双向绑定。
- 数据加载问题：如果vue-multiselect的选项数据是通过异步请求获取的，需要确保数据加载完成后再渲染vue-multiselect组件。可以使用Vue的生命周期钩子函数或异步请求库（如axios）来确保数据加载完成后再进行渲染。
- 其他可能的问题：除了上述几个常见原因外，还可能存在其他与Laravel框架或vue-multiselect组件相关的问题。可以通过查看浏览器控制台的错误信息或在Laravel社区中寻求帮助来解决问题。
总结起来，解决vue-multiselect在Laravel中不起作用的问题，需要确保正确引入组件、正确注册组件、正确进行数据绑定、确保数据加载完成后再渲染组件，并排除其他可能的问题。以下是腾讯云提供的一些相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供高性能、可扩展的云服务器实例，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供稳定可靠的云数据库服务，支持高可用、备份恢复等功能。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全可靠的云端存储服务，适用于存储和处理各种类型的文件和数据。详情请参考：https://cloud.tencent.com/product/cos
请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行。
相关·内容
我正在运行一个支持VueJS开箱即用的Laravel5.3应用程序，我和webpack在一起。我在使用vue-multiselect时遇到问题，它显示：
[Vue warn]: Attribute "v-model" is ignored on component <multi-select> because the component is a fragment instance:
我使用的是vue-multiselect文档中提供的一个基本示例，我最终将使用它在表单中显示国家/地区，因此组件的名称也随之而来。我试过寻找解决方案，但似乎没有人在Laravel 5.
浏览 15提问于2017-01-22得票数 0
我是一个在拉拉，国家预防机制和vuejs的事情完全新手。我做了一个新的，而不是玩jquery，我想学习如何使用vuejs。
我今天碰壁了:(试着用两天的时间让这个Multiselect ()在我的项目上运行。我想我错过了一些基本的..。我所做的:运行在终端npm上安装vue-multiselect在资源/js/comonents/Multiselect.vue中创建的代码粘贴在/Multiselect.vue中：
<template>
<div>
<multiselect
v-model="selected&
浏览 2提问于2020-08-13得票数 0
回答已采纳
我需要在vue-multiselect中添加一个侦听器，如下所示(但这不起作用)
$('.multiselect').change(console.log("multiselect changed"));
它必须添加到钩子中。
我尝试了很多东西，但是由于vue-multiselect的性质，传统的jQuery不能工作，你不能监听multiselect__input上的更改，因为它的值实际上没有变化。
有一个根据状态添加\删除的.multiselect__single元素，但我不希望侦听\测试html的更改。
浏览 0提问于2018-09-20得票数 0
我是vue新手。我在Laravel中使用vue-multiselect，但无法使其工作。有人能给我一些建议吗？
我的app.js是：
Vue.component('multiselect', require('./components/DropDown.vue'));
const app = new Vue({
el: '#app'
});
我的DropDown.vue是：
<template>
<div>
<multiselect
v-model="multiValue
浏览 16提问于2018-08-14得票数 0
我已经实现了最新的Vue-Multiselect，并让它在页面中渲染ok。由于某些原因，v-model值似乎没有生效，因为它保持为空。
import { Multiselect } from 'vue-multiselect'
var MultiSelect = Vue.extend({
components: { Multiselect },
template: '<div><multiselect :options="options" :multiple="true" :close-on-select="f
浏览 4提问于2017-02-03得票数 0
回答已采纳
我在我的vue.js项目中使用了vue-multiselect组件，我使用v-on指令在change事件上执行一个函数，
<multiselect v-model="selected" :options="projects" :searchable="false" :custom-label="customLabel" track-by="name" v-on:change="executeLoader">
<template slot="customLabel"
浏览 4提问于2018-03-30得票数 5
回答已采纳
1回答
我有我的laravel应用程序，我开始使用Vuejs。我是新来的，也许我漏掉了一些核心概念。
无论如何(例如)，我想使用这个：一个具有搜索-自动完成的多选择。
在我跑完之后
npm install vue-multiselect@next --save
我的node_module中有组件dir，在package.json文件中也有依赖项vue-multiselect。
现在，我对如何在我的视图中继续使用这个组件感到有点困惑。
该网站的安装将无法工作。我不能在common js中使用请求或导入关键字。
基本用法
<multiselect v-model="value" :
浏览 6提问于2017-01-05得票数 1
我想截断vue-multiselect上的许多值。
我尝试这样重写许多类，但它不起作用，就像下面这个例子：
.multiselect__content-wrapper {
overflow-x: hidden;
text-overflow: ellipsis;
}
浏览 1提问于2018-11-28得票数 4
2回答
我正在尝试用Laravel 5实现vue-multiselect (1.1.3版)。
在我的vue文件中有这样的代码：
<template>
<div class="dropdown">
<multiselect
:seleted="multiValue"
:show-labels="false"
:options="options"
:pla
浏览 0提问于2016-10-10得票数 0
我在Laravel 5.3中为Vue Multiselect "^2.0.0-beta.14“使用了这个示例。
插件呈现正确，但我不能获得选择通过v-模型。我期待@{{ selected }}与当前的选择更新。
app.js
Vue.component('dropdown', require('./components/Multiselect.vue'));
VUE JS
<template>
<div>
<multiselect
v-model="value"
:options=
浏览 2提问于2017-03-08得票数 2
回答已采纳
1回答
我正在尝试用<router-link>选项填充vue多选下拉菜单。指定到不同组件的路由器链接的常用方法是在<template>中声明性地指定，而vue-multiselect使用绑定选项数组。有没有什么办法来解决这个问题？ 我想重用vue-multiselect来在组件之间导航。
浏览 11提问于2019-05-30得票数 3
回答已采纳
我有一个简单的表单： <form action="" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby=
浏览 11提问于2019-01-14得票数 3
2回答
我试图保存从事件视图发送的数据。在storeEvent方法的EventController驱动，但它给我的错误422和我找不到问题到目前为止。
事件模型与类别模型有多到多的关系，事件与硬币模型也有多到多的关系，这就是为什么我使用vue-multiselect的原因，因为用户可以为同一事件选择多个类别或几个硬币。
Event.vue
<template>
<form v-on:submit.prevent="createdEvent" class="form-horizontal">
<div class="form
浏览 6提问于2018-04-25得票数 1
回答已采纳
2回答
如何在属性中插入函数？
、、、、
我试图循环遍历cost_classification_options数组并用空格替换下划线，同时将每个字符串的第一个字母大写。我已经做了一个方法convertToTitleCase(str)，做这个，但似乎不起作用。如何在convertToTitleCase ()中正确插入:options (Str)方法？
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<script>
import Form from 'vform'
import M
浏览 7提问于2022-04-11得票数 1
回答已采纳
1回答
好吧，我有一个Laravel Vue装置。
Package.json
{
"devDependencies": {
"axios": "^0.15.3",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "4.0.0-beta",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"
浏览 0提问于2019-04-29得票数 1
回答已采纳
1回答
在vue模板中无法反应的道具
、、、、
我的代码如下：
var CatShelter = {
template:
'<vue-multiselect' +
' :options="options">' +
'<template> <i v-on:click="removeCats(option)"></i></span> </template>' +
'</vue-multiselect>' +,
props: {options: Array},
浏览 3提问于2021-04-23得票数 0
回答已采纳
我正在使用vue-multiselect如下所示： ...that从阵列中获取活动客户列表，然后在漂亮的选择菜单中提供这些客户。 这很好用。但是，我需要从另一个资源添加另一个选项(称为customerNone)发送到optionsprop，但数据以对象的形式返回，如下所示：{"uid":1，“姓氏”：“未给定”，“名字”：“用户”，“电子邮件”：null，“电话”：null...blah}vue-multiselect文档声明:option道具必须成为一个数组。 问:在vue-multiselect组件中处理这个问题的最佳方式是什么？以下是我试图帮助解释我正在尝试做的事情(不
浏览 87提问于2021-02-23得票数 1
回答已采纳
2回答
当我单击该按钮时，会打开多选。但当我再次单击该按钮时，true / false值闪烁，结果，true仍然是true。我做错了什么？
模板：
<div id="app">
<button @click="toggle">open and close later
</button>
<pre>{{ isOpen }}</pre>
<multiselect
ref="multiselect"
v-model="value"
浏览 36提问于2020-02-19得票数 1
回答已采纳
我是Laravel和Vue的新手，需要帮助我实现Vue-Multiselect。
我不知道如何将实际的选项传递给select。
我的vue档案：
<template>
<div class="dropdown">
<multiselect
:selected.sync="selected"
:show-labels="false"
:options="options"
浏览 0提问于2016-09-30得票数 4
回答已采纳
我对我的表使用vuetable-2。在一列中，我需要有多个select，所以我使用Vue-multiselect。问题是，Vue-multiselect使用v-model="value“，所以当我选择一行中的内容时，所有其他行都会更新为相同的选择。
如果这是用于呈现表的forach循环，我会使用v-model="valuerow.id"，但是在vuetable-2中，我不知道如何访问我的表行的id。我尝试了: v-model="valueid"，v-model="valuedata.id"，v-model="valuerowDat
浏览 6提问于2018-08-29得票数 2
我有一个Laravel5.3应用程序，并使用vue-multiselect (版本2.0.0-beta13)来显示multiple选择。select的选项是通过对给定路由的AJAX GET调用(为可读性而缩短)获取的。
[
{
"address1": "-",
"address2": "-",
"city": "-",
"company": "-",
"id": 0
浏览 7提问于2017-01-20得票数 0
回答已采纳
1回答
我目前正在用vue-multiselect构建一个过滤器。一切正常，但我面临的唯一问题是，在页面重新加载时，标签(v-model)是空的。
原因肯定是，v模型selectedOption是在页面上重新加载空的，因为父组件的支柱是一个计算属性。
为了获得最好的可读性，我将削减大部分代码。
父组件(ProductList.vue):
<template>
<section>
<ProductListFilter v-bind:currentProductType="currentProductType"
</section>
浏览 1提问于2021-02-12得票数 0
回答已采纳
2回答
我正在尝试在我的刀片视图中使用。我在JS中有.vue文件和以下代码：
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
value: '',
options: ['Select option', 'options', 'selected', 'mulitple', 'label
浏览 3提问于2017-04-05得票数 2
回答已采纳
我正在使用vue multiselect包，在使用<multiselect>代替传统的<select>时，我遇到了一个问题。在我的vue组件中，我传入了一个prop，它包含一个对象数组，每个对象都有不同的属性。对于传统的vue中的select，您可以使用v-for遍历数组，然后根据object.id传递值，有没有办法使用vue-multiselect包来做到这一点？不确定以前是否有人尝试过将此作为表单的一部分，但值得一问。谢谢。 我的Vue文件 <multiselect
v-model="users"
:optio
浏览 26提问于2020-11-03得票数 2
回答已采纳
我正在和Vue.js合作，我需要一个“智能”的搜索栏。我最终使用了vue-multiselect，但我需要在下拉列表中嵌套菜单。显然，有一个名为treeSelect的东西可以帮助我解决这个问题，但我不知道如何将它们结合在一起。代码非常简单。 <template>
<div>
<multiselect v-model="value" :options="options" placeholder="Pick a value" style="width:600px;"></mul
浏览 22提问于2019-02-18得票数 0
任何人都知道是否有可能将vue-multiselect组件设置为属性:multiple="false“，并且仍然将选择内容显示为标记。
我已经尝试添加标签槽，但它不工作。
在网上找遍了都找不到。
谢谢
浏览 0提问于2019-04-08得票数 0
我有一个多选择组件，如下所示：
<multi-select prp-selected="<?php old('organisations_working_at') ?>"
prp-name="organisations_working_at"
:prp-options="{{ json_encode($organisations) }}"
prp-placeholder="Kies organisatie(s)"
浏览 1提问于2017-07-25得票数 1
回答已采纳
1回答
正如您在下面的jsfiddle上看到的，我使用的是一个名为vue Multiselect的Vue组件。 当多选的文本大于其宽度时，多选的高度会增加以适合文本。 我希望在不增加高度和宽度的情况下将其保持在一行中。 https://jsfiddle.net/uweL9zap/1/ HTML： <div id="app">
<multiselect
v-model="value"
:options="options"
track-by="library"
:custom-lab
浏览 30提问于2019-03-22得票数 4
回答已采纳
1回答
有没有办法用vue-multiselect来显示例如"3 selected“而不是每个选择。我有一个设计，其中有有限的空间来显示每个选择。
标签槽似乎只允许更改每个选择。
浏览 1提问于2019-08-21得票数 0
1回答
我试图了解如何更改vue-multiselect的“指针”部分的html/css，例如 (showPointer)。
对于较小的屏幕，文本“按enter to select”掩盖了值。因此，我试图删除文本或创建自己的悬停html/css。
这是大屏幕上的样子。
浏览 3提问于2020-02-01得票数 0
回答已采纳
我用的是vue-multiselect。
我的模板看起来像这样。
<multiselect v-model="value" :options="options" searchable="true"></multiselect>
默认情况下，打开multiselect时，搜索查询为空。
我希望默认的搜索查询等于v-模型。
浏览 1提问于2019-10-28得票数 0
1回答
我使用的是，如果用户单击“重置”按钮，我很难理解如何重置vue-multiselect组件。
这是我的代码：
模板：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<CustomerSelect @selectedUser="customUser"/>
<button type="button" @click="resetCustomQuery()">Reset<
浏览 0提问于2020-05-22得票数 1
回答已采纳
我正在尝试使用Vue.js多选择组件：
不幸的是，它没有按应有的方式呈现。我不是多选择下拉列表，而是获取如下内容：
使用的代码：
HTML：
<div id="app">
<button @click="toggle">open and close later
</button>
<pre>{{ isOpen }}</pre>
<multiselect
ref="multiselect"
v-model="v
浏览 1提问于2018-07-07得票数 0
回答已采纳
1回答
我使用Vue-Multiselect 创建了一个多选择输入，如下所示
<multiselect v-on:select="myfilter()" v-model="cityF"
:options="cities" placeholder="City" label="name" track-by="name">
</multiselect>
但在myfilter函数中，这始终是未定义的。有什么问题吗？我该怎么解决呢？非常感谢。
浏览 0提问于2019-08-06得票数 0
回答已采纳
我正在使用laravel dusk在我的应用程序中编写测试。在一个表单中，我使用了一个vue-multiselect组件。我还不知道如何在黄昏中选择一个选项。
对此有什么建议吗？
谢谢。
浏览 5提问于2018-01-10得票数 1
我已经在main.js中包含了插件和它们的css文件：
import Vue from 'vue'
import App from './App'
import router from './router'
import 'moment'
import 'jquery'
import 'bootstrap'
import BootstrapDatePicker from 'vue-bootstrap-datetimepicker'
import vueMultiSelect f
浏览 5提问于2017-07-01得票数 0
回答已采纳
目前，我有一个vue-multiselect组件，它需要一个v-model。
我想包装这个组件，这样我就可以构建一个单一选择组件和一个多选择组件。
在处理单个select组件时，我遇到了以下警告
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop bein
浏览 1提问于2018-04-20得票数 4
回答已采纳
2回答
我用的是和Laravel。
我正在使用表单中的multiselect组件来让用户选择多个国家。该组件工作良好，但当我提交表单并对其进行dd()时，它将显示[object Object]。
我无法得到多选择组件的值。我发现了类似的问题，但没有一个对我有用。
这是我的代码：
ExampleComponent.vue文件：
<template slot-scope="{ option }">
<div>
<label class="typo__label">Restricted country</label>
<
浏览 0提问于2018-08-14得票数 1
回答已采纳
我继承了一个Vue.js项目，其中包括：
import Multiselect from 'vue-multiselect';
<multiselect :multiple="true"
v-model="selectedTags"
:options="tagOptions"
label="title"
track-by="id"></multiselect>
现在，在同一个页面上，我们还应该有一个不同的多选择对象，从不同的地方导入，看起来如下：
i
浏览 0提问于2019-04-17得票数 4
回答已采纳
1回答
我想知道如何更改此链接()中显示的vue-multiselect示例，以便下面显示的数组仅显示由逗号分隔的名称列表。您可以在图像中看到，我选择了Javascript，在它下面的object显示了两个对象的整个对象。我只想显示用逗号分隔的两个名字。任何帮助都将不胜感激..。
我是否可以对下面的{{ value }调用做一个简单的更改(希望如此)来完成这个任务？更改为{{ Value.name }等不起作用。
<div>
<label class="typo__label">Tagging</label>
<multise
浏览 1提问于2018-11-24得票数 0
回答已采纳
我在一个表单中有一个vue-multiselect组件，控制台报告我的选项是未定义的，尽管我可以看到它们没有定义。我的选项是从后端获取的，并在此组件创建之前很久就放入存储中。
控制台错误是
Invalid prop: type check failed for prop "options". Expected Array, got Undefined
这是我的组件
<template>
<form action="#" @submit.prevent>
<section>
<div class=&
浏览 0提问于2019-11-01得票数 1
我没有一个完整的vue应用程序，所以我使用来替换一些应该用vue处理的元素。
我只想在html文件中使用。
因此，我尝试了以下几点：
index.ts
import Vue from "vue"
import VueCustomElement from 'vue-custom-element'
import Autocomplete from "./vue/autocomplete.vue"
Vue.use(VueCustomElement);
Vue.customElement('auto-complete', Autocom
浏览 1提问于2018-04-06得票数 2
我是javascript / vuejs的新手，我实现了一个vue-multiselect，其中我想有两个类别组，一个是来自github的项目，第二个是第三方项目。
对于这两种情况，我都编写了下面的代码。如果我将其中任何一个设置为“this.projects = _projects”或“this.projects = thirdParty”，则会起作用，但如果将列表thirdParty与_projects连接起来，则不起作用。
mounted() {
var _projects = [];
var thirdParty = [];
axios.get("http://12
浏览 0提问于2018-03-31得票数 3
回答已采纳
加载组件时，需要在下拉列表中选择值 我正在尝试使用vue-multiselect与我的代码成为朋友 找到一个类似的主题-但是，该字段中没有显示任何内容-如果您随后选择了一个值，则所有内容都将正常工作link 事实上，我必须通过axios下载，迷你版本看起来像这样 import Multiselect from "vue-multiselect";
export default {
components: {
Multiselect
},
data() {
return {
books: [],
selectedBook: null,
};
浏览 26提问于2020-10-13得票数 0
回答已采纳
我正在研究如何在Laravel 5上设置Vue-multiselect组件。直到现在，我已经有了一个名为register.vue的组件，这是我需要组件的代码的一部分(我不会把所有的代码都放在这里，因为它太大了。
<b-row align-v="center">
<multiselect
v-model="selected"
:options="options">
</multiselect>
</b-row>
下面是我在脚本部分中包含组件的地方
i
浏览 0提问于2019-01-04得票数 1
回答已采纳
想象一下Vuejs- Vuex的应用程序。我想要一个多选择的下拉列表。Vue组件中的基本示例：
<template>
<div>
<multiselect
v-model="values"
:options="options">
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
expor
浏览 0提问于2019-06-12得票数 2
回答已采纳
1回答
我在单选择模式下使用vue-multiselect，并尝试应用样式使选项下拉列表与最宽选项的宽度相同。我做到了这一点，但无法获得.multiselect__option与父.multiselect__element相同的宽度：
.multiselect {
width: fit-content
}
.multiselect__content-wrapper, .multiselect__element {
width: fit-content;
}
.multiselect__option {
width: 100%;
}
浏览 13提问于2018-03-26得票数 6
回答已采纳
我正在尝试创建一个VueJS组件，其功能如下: 1)在挂载/创建时下载一些数据(选项列表)；2)在中显示下载的数据；3)在用户完成选择时将选定的数据发送回父服务器。如下所示：
<template>
<div>
<multiselect v-model="value" :options="options"></multiselect>
</div>
</template>
<script>
import Multiselect from '
浏览 10提问于2022-10-15得票数 1
回答已采纳
我想要一个vue-multiselect下拉菜单，点击add more按钮
目前我不知道有什么好办法
Problem/Question:如果我添加了2个下拉列表，如果我选择了一个选项，也选择了相同的选项，我想避免这样做。
注意：每个添加都应该有自己的vue-multiselect实例
var app = new Vue({
el: '#app',
components: { Multiselect: window.VueMultiselect.default },
data () {
return {
value: "",
浏览 0提问于2021-07-12得票数 0
回答已采纳
1回答
在执行某些函数之前，我想删除vue-multiselect元素中用户输入的文本查询输入。
如果我不删除用户文本输入，我的数据数组仍然会被过滤，并且我不能访问整个初始数据集
我尝试使用jquery选择器将其设置为null，但我认为用户文本是由vue恢复的。
谢谢
请原谅我粗略的英语，我是法国人。
诚挚的问候
浏览 17提问于2019-11-06得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
