更新select2组件的选项- vue js
在Vue.js中更新select2组件的选项可以通过以下步骤完成：
- 首先，确保你已经安装了select2组件和Vue.js，并在你的项目中引入它们。
- 在Vue组件的
data选项中定义一个数组，用于存储select2组件的选项数据。例如：
data() {
return {
selectOptions: []
}
}- 在Vue组件的
mounted生命周期钩子中，使用select2的API来初始化select2组件，并将选项数据绑定到select2组件上。例如：
mounted() {
// 初始化select2组件
$(this.$refs.select2).select2();
// 更新select2组件的选项
this.updateSelectOptions();
}- 创建一个方法来更新select2组件的选项数据。在这个方法中，你可以通过异步请求、计算属性或其他方式获取最新的选项数据，并将其赋值给
selectOptions数组。例如：
methods: {
updateSelectOptions() {
// 发起异步请求获取最新的选项数据
axios.get('/api/select-options')
.then(response => {
// 将获取到的选项数据赋值给selectOptions数组
this.selectOptions = response.data;
// 更新select2组件的选项
$(this.$refs.select2).empty().select2({
data: this.selectOptions
});
})
.catch(error => {
console.error(error);
});
}
}- 在Vue组件的模板中，使用
v-for指令将selectOptions数组中的选项渲染到select2组件中。例如：
<select ref="select2">
<option v-for="option in selectOptions" :value="option.value">{{ option.label }}</option>
</select>这样，当selectOptions数组中的选项数据发生变化时，select2组件的选项也会相应地更新。
对于Vue.js中更新select2组件的选项，你可以参考腾讯云提供的云开发文档中的相关内容：Vue.js文档。
请注意，以上答案仅供参考，具体实现方式可能因项目需求和技术栈而有所不同。
相关·内容
1回答
我想结合使用Select2和Vue.js来显示一些可选选项，但是无论我如何实现它，总是会出现错误： Uncaught ReferenceError: select2 is not defined
at Object.select2 (external "select2":1)
at __webpack_require__ (bootstrap:766)
at fn (bootstrap:129)
at Module../src/jquery.js (jquery.js:3)
at __webpack_require__ (bootstrap:766)
at fn (boot
浏览 10提问于2019-02-01得票数 0
3回答
嗨，我试图用axios改变我的vue包装组件下拉列表。这是我的密码。
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</style>
</head>
<
浏览 0提问于2018-12-31得票数 0
回答已采纳
1回答
嗨，我正在使用修改的包装来处理vue.js的多个选择。我试图在vue组件中更改这个值。这是我的密码。
<select2-multiple :options="car_options" v-model="input.classification">
<option disabled value="0">Select one</option>
</select2-multiple>
这是我的剧本
Vue.component('select2Multiple', {
pr
浏览 1提问于2019-02-12得票数 1
回答已采纳
我试图实现这一点：
我不做SPA，虽然我在我的页面中使用Vue组件。
Vue警告:挂载钩子中的错误："TypeError：$(.).select2不是函数“
找到位置
我知道这个错误
Error in mounted hook: "TypeError: $(...).select2 is not a function"
found in <Select2> at
C:\laragon\www\lara\resources\assets\js\components\ui\Select2.vue
我将select2和vuejs都包含在html文件中
浏览 2提问于2017-07-21得票数 1
回答已采纳
1回答
嗨，我正在尝试通过ajax获取数据，并使用vue包装组件。这是我的密码。
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body
浏览 1提问于2018-12-31得票数 0
回答已采纳
1回答
我正在尝试扩展select2示例，以使其更实用。到目前为止，我已经添加了多选择功能，并尝试允许自定义select2配置。
似乎当将道具对象传递给组件时，其功能属性将被剥离。
--什么是父级为小部件配置js函数的解决方案？
我有点困惑，因为嵌入式版本实际上显示在内置控制台输出中正确地传输了params，而jsfiddle浏览器控制台输出却没有。然而，两个版本都没有将函数传递给select2小部件.
Vue.component('select2', {
props: ['options', 'value', 'params'
浏览 1提问于2017-01-03得票数 0
3回答
我有一个使用JS的Vue应用程序。除其他外，我需要使用一些Select2来动态加载值。我为我的Select2做了一个Vue组件，除了一个问题外，它工作得很好。我使用Ajax来获取Select2的动态选项，但是当我的Select2被挂载时，它不会为Ajax加载一个值。这是我的密码：
<template>
<table class="table">
<thead>
<tr>
<th>Substance</th>
<th
浏览 3提问于2020-05-04得票数 0
回答已采纳
1回答
在我实现时，用他们的文档安装之后。它没有显示在html上的输出，但我在源代码中有它的html
顺便说一句:我正在Laravel框架上使用Laravel
安装：
// npm install
npm install vue3-select2-component --save
用作组成部分：
import {createApp, h} from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import IconsPlugin from 'bootstrap-vue-3'
import {Iner
浏览 21提问于2022-04-05得票数 1
回答已采纳
1回答
我一直在遵循vue js ，我正在尝试改变它的工作方式，使我可以向常规的选择框添加一个v-select2指令，而不是为每个选择框创建模板和组件。
我这里有一个，它显示了组件的使用。
组件html如下所示(选项在JS中设置)。
<div id="app"></div>
<script type="text/x-template" id="demo-template">
<div>
<p>Selected: {{ selected }}</p>
浏览 0提问于2017-05-08得票数 0
4回答
我不知道为什么，但是select2不能仅仅通过添加vue js来工作。尝试了很多事情，比如搜索，但没有解决方案。当我删除vue时，它起作用了，当我添加它时，第一件事不知道为什么会发生这种情况。
下面是它的工作示例。
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/
浏览 4提问于2018-01-14得票数 7
我刚刚开始使用Vue.js，并使用Vue CLI3创建了一个项目。目标是最终将我当前的应用程序迁移到Vue。我正在试验jQuery和Select2，因为这是在我当前的应用程序中使用的，我想知道这种方法是否正确，为什么我仍然会收到编译错误，即使它看起来很有效。注意:我确实通过Vue UI安装了jQuery依赖项。
以下是我所拥有的：
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from
浏览 0提问于2019-02-13得票数 0
2回答
我用vue.js做了一个依赖的下拉列表，并集成了另外两个用于多选(select2和多选)的jquery应用程序。我遇到的问题是，当vue js启用add element to el:时，其他两个插件不能运行，当vue元素被移除时，两个插件都能顺利运行。代码被截断。
浏览 2提问于2017-02-27得票数 0
我来这里有个问题。我使用vue.js作为cdn。所以我不能安装npm和使用包。
当我尝试使用jQuery的select2插件时，问题就开始了。它正确地显示了动态到来的选项值，但当我选择一个值时，问题就发生了，vue.js实际上没有得到那个值。我只想告诉你，如果我不使用select2类，它工作得很好，vue会得到这个值。
下面是我的select option部分代码
<select v-model="formData.allowance_id" id="allowance_id"
name="allowance_id" cla
浏览 3提问于2020-05-11得票数 0
3回答
我使用vuejs并创建/删除动态select，它运行良好。
这是工作小提琴：
var vm = new Vue({
el: "#app",
data: {
optionArr: [{id:1,price:100},{id:2,price:200}],
options: [{id:1,value:'option1'},{id:2,value:'option2'},{id:3,value:'option3'}]
},
mounted() {
console.log("help!!!!&#
浏览 0提问于2017-01-13得票数 6
回答已采纳
1回答
在我的项目中，我使用jquery select2和datepicker插件。我对他们使用了自定义指令。它们可以正常工作，直到我需要使用v-model获得选定的值为止。由于某些原因，它不绑定值。我猜在某个地方发生了冲突。
以下是我的指示：
Vue.directive('select', {
twoWay: true,
inserted: function (el) {
$(el).select2();
},
updated: function (el) {
$(el).select2();
}
});
更新的
浏览 2提问于2017-04-28得票数 0
4回答
我正在使用select2来增强一个html select元素。我希望将select元素的值绑定到一个Vue变量，但是Select2似乎阻止了这一点。
在保持Select2行为的同时实现这种数据绑定和事件侦听的最佳方式是什么？我认为这是一个将select2事件链接到Vue实例的例子。
我用演示了这个问题(不在下面运行，但可以在jsfiddle上运行)：
$('#things').select2();
new Vue({
el: "#vue-example",
data: {
thing: null,
thing2: null
},
浏览 0提问于2015-07-24得票数 13
我正在尝试将Bootstrap Select2放在Vue包装中。不知怎么的，我的代码起作用了。但对我来说不太合适。
我在这里找到了一个参考在VueJS网站的例子中，el是空的。我没有坚持这个概念，在新的Vue部分中，它们包含了一个模板，因为我的el有侧边栏和其他东西。我所做的就是我增加了一个
<admin-access></admin-access>
到HTML中的某个部分。
我认为我的组件是嵌套的，我对它在VueJS中是否合适表示怀疑。
有更好的方法来编码这个吗？
模板
<template id="select2-template">
浏览 1提问于2017-08-30得票数 0
1回答
我对vm.$watch方法有问题，它可以监视单个变量。
我无法观看数组元素。
在下面的示例中，我无法看到下面两个复选框上的更改：
Vue.directive('select', {
twoWay: true,
bind: function() {
var optionsData
var optionsExpression = this.el.getAttribute('options')
if (optionsExpression) {
optionsData = this.vm.$eval(optionsExp
浏览 2提问于2015-08-07得票数 0
1回答
在这个示例的基础上，我尝试创建组件以供将来重用。不幸的是，我的代码不起作用。
HTML：
<template id="my-template">
<p>Selected: {{selected}}</p>
<select v-select="selected" :options="options">
<option value="0">default</option>
</select>
</template>
&
浏览 0提问于2016-04-06得票数 1
回答已采纳
我有一个用来保存学生名单数据的应用程序。组件应该接受该列表并呈现一个select下拉列表(使用select2)。
在摆弄控制台中，它正在显示jQuery is not defined。我以为现在所有的花招都包括jQuery了？
我真的不知道为什么这件事会破坏我们之间的关系。我的指令有什么问题吗？我知道在Vue 2.0中，他们删除了params，但这应该足够了。任何对我的代码的关注都将不胜感激。
// Define component
var studentsComponent = Vue.extend({
props: ['students'],
data(): {
浏览 6提问于2017-03-16得票数 1
回答已采纳
我用options在vue3中创建了一个vue3包装器，一切正常，但是问题是，当从调用API获得值时，它没有在select2选项中选择默认值。但是，当我创建一个静态的对象数组时，它就是这样做的。我不知道当它来自API的时候为什么要工作
父组件
在这里，我可以在选项道具中传递静态选项数组，我选择的值是2，它是在我的Select2组件中选择的，但是当传递formattedCompanies时，它不是与静态选项数组相同的格式，那么为什么这里没有选择任何原因？
<template>
<Form @submitted="store()" :processing=&#
浏览 6提问于2022-02-28得票数 0
4回答
我在vuejs中使用select2，我发现vuejs没有使用jquery，因为vuejs使用的是navite html。
我正在使用这个代码
Vue.directive('select', {
twoWay: true,
bind: function () {
$(this.el).select2()
.on("select2:select", function(e) {
this.set($(this.el).val());
浏览 5提问于2016-12-05得票数 12
回答已采纳
1回答
我有一个非常简单的Vue js设置，我试图使用它来使用指令绑定select2。我宁愿使用模板，但由于无法控制的原因，我实际上不得不使用asp:DropDownList，这意味着我不得不在客户端内联我的选择框。
因此，我试图设置一个Vue.directive，但是在执行指令之后，就找不到select2了。因为执行了select2，原来的复选框被隐藏了，我在页面上没有任何显示。
正在命中调试停止，控制台中没有显示错误。
<div id="tabUserInfo">
<input id="myid" ty
浏览 3提问于2017-09-13得票数 1
回答已采纳
1回答
JQuery插件在VUE中的应用
、、、、
在我的webpack.mix.js中，我有这样的东西：
// vue components
mix.js('resources/assets/js/app.js', 'public/js');
// scripts which I need
mix.scripts([
'resources/assets/js/jquery-2.2.4.min.js',
'resources/assets/js/bootstrap.min.js',
'resources/assets/js/fastclick.js
浏览 1提问于2017-04-12得票数 0
在这里Select2.vue comp来源：
在这里ItemDetail.vue页面来源：
我在VueJS中使用VueJS，它是基于VueJS文档和其他资源创建的。一切看起来都很好。但是，有时tag或selected没有选择正确，调试后我发现它有时是undefined、[]或''(空)。
我高度怀疑这是因为异步。这里，我想要存档:我想显示所有单位，支持一个项目。
AJAX: api单元AJAX: api用于获取项的详细信息。数据项，包括支持此项的当前单元。基于item.units和units加载select2单元。有时是好的，但有时不是。
以下是我所做的一些解释
// Call
浏览 1提问于2020-01-18得票数 0
2回答
我想把BASE_URL传递给所有组件。我的App.js就像：
<template>
<router-view></router-view>
</template>
<script>
import addJoke from './components/addJoke.vue'
import showJokesAll from './components/showJokesAll.vue'
export default {
components: {
'add-joke':
浏览 9提问于2017-08-18得票数 1
回答已采纳
我有以下laravel布局模板：
<html lang="en">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ URL::asset('css/libs.css') }}" rel="stylesheet">
<link href="{{ URL::asset('css/app.css')
浏览 2提问于2019-07-15得票数 0
1回答
<script>
import * as Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
//my operation
}
</script>
这是“vue类组件”的一个简单示例。但是，当我运行项目时，浏览器会显示这样的错误信息：
Uncaught TypeError: Class extends value #<Object> is
浏览 17提问于2022-03-08得票数 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
回答已采纳
1回答
我创建了一个新的指令来使用jQuery插件Select2和vue.js，就像在vue.js 上写的那样。
但我不想只输出所选选项的值。为了存储选择，我尝试将我的自定义方法create绑定到@change事件。
在指令中，Select2将在更新时触发select输入字段的更改事件，但是它仍然不调用我的自定义方法。
有什么隐藏的魔法吗？我试着阅读了vue.js的源代码，但是找不到让我走上正确方向的东西。
Vue.directive('select', {
twoWay: true,
priority: 1000,
params: ['options'
浏览 3提问于2016-05-29得票数 0
1回答
我有两个道具：
props:['bank_lists','branch_list'])
在更改银行时，我想更改'branch_list‘。
HTML：
<div class="form-group m-form__group row">
<label for="accounts_bank_id" class="col-lg-3 col-form-label">Bank <span class="requiredField"&g
浏览 1提问于2019-01-05得票数 0
1回答
在装入中放入false的正确方法是什么(在分派之后)？
比如：(我知道它不起作用)
this.loading = true;
this.$store.dispatch('items', data);
this.loading = false;
<script>
export default {
data() {
return {
loading: false,
}
},
methods: {
st
浏览 16提问于2020-02-05得票数 2
回答已采纳
3回答
最近，我试图在一些真实的应用程序中重用我的Vue组件，以消除<divs>中不必要的重复和混乱。
但我在这样做时遇到了麻烦。几个小时后，我设法“完成”了它，但现在事件触发了两次，我不知道确切的原因。
我已经做了一个基本的设置来显示问题：
Vue.component("bs-select",{
template:
`<div class="form-group">
<label class="control-label">{{ label }}</label>
<select
浏览 0提问于2018-11-08得票数 2
2回答
许多天来，我一直在寻找这个错误的答案。我尝试了许多选择，但都没有效果。
我需要选择多个值。当我选择多个值时，我的代码挂起，但是当我使用单个select时，它在self.$emit('input', this.value)中工作得很好。我需要的是选择多个值。
Select2.vue
<template>
<select multiple class="input-sm" :name="name">
<slot></slot>
</select>
</t
浏览 6提问于2017-05-12得票数 5
回答已采纳
2回答
你好，我需要帮助，我使用vue.js，我需要"fullpage.js“，但它只支持vue3
如何在vue.js中使用完整页面？
或者，我如何使用纯JS？
()
到目前为止，这是我的代码脚本：
<script>
import Bio from "../components/Bio.vue";
import Counter from "../components/Counter.vue";
import Gallery from "../components/Gallery.vue";
import About from
浏览 13提问于2022-10-27得票数 0
1回答
Github
App.vue
<template>
<FruitList></FruitList>
</template>
<script>
import FruitList from './components/FruitList'
export default {
name: 'App',
components: {
FruitList
}
}
</script>
FruitList.vue
<template>
<div v-for=&
浏览 0提问于2018-05-05得票数 0
我有以下main.js：
import Test from './components/Test.vue'
Vue.component('test', Test);
var vm = new Vue({
el: '.vue-wrap',
components: { Test },
});
window.vm = vm;
我有一个折叠的Test.vue：
<template>
<li>
Hello World
</li>
</template>
&
浏览 0提问于2018-08-08得票数 2
回答已采纳
1回答
我有一些重复的功能，许多组件将使用。因此，我的第一个想法是，我应该创建一个基本组件，并让我的组件继承/子类。
但也许这在vue.js中是不可能的，也许这不是vue.js做事情的方式吗？如果我解释一下我的用例，你能建议我如何最好地在vue.js中实现这一点吗？
BasePage.vue
<template>
...
</template>
<script>
export default {
name: 'animated-page',
watch: {
'$route' (to, from) {
浏览 2提问于2018-04-12得票数 2
我已经从我的Laravel项目url中删除了public。但是现在我的Vue.js坏了。
如果我从src文件中删除public，它不会识别出项目有Vue.js，但如果我添加public，它就会识别出这个项目有Vue.js。但是它没有在我的Blade页面上显示该组件，而是给出了这个错误：
[Vue warn]: Unknown custom element: <app-some> - did you register the component correctly? For recursive components, make sure to provide the "nam
浏览 20提问于2019-08-04得票数 0
1回答
我遇到了一个问题，select2下拉菜单在打开时仍然保持焦点。
基本上，当您使用select2单击下拉菜单时，会显示一个特殊的select2下拉菜单，顶部有一个文本输入，这样您就可以开始键入并缩小选择选项的范围。当select2下拉菜单打开时，焦点不在搜索输入中。它仍然在原始的select html元素上。
这是一个在CodePen上工作的select2下拉菜单，只是作为一个例子。我不能复制我在CodePen中遇到的问题，所以它让我觉得在我的网站上有一些冲突。但我不知道是什么，我似乎也不能缩小范围。
see codepen for sample working code
我可以看到焦点在打开
浏览 1提问于2018-04-11得票数 2
我创建了一个使用select2.js的新指令，我希望在select2的change事件中调用一个回调参数。
指令代码：
Vue.directive('select', {
twoWay: true,
priority: 1000,
params: ['options', 'change'],
bind: function() {
var self = this;
var vm = this.vm;
var key = this.expression;
$(this.el)
.select2({
浏览 2提问于2016-06-22得票数 2
回答已采纳
我在vue 2中创建了一个select2指令，如下所示： // Select2 directive file
import Vue from "vue";
function updateFunction (el, binding) {
setTimeout(() => {
Vue.nextTick(function () {
let options = binding.value || {};
$(el).select2(Object.assign({}, {
},
浏览 23提问于2021-09-26得票数 0
我已经创建了一些Vue中间件，并且我试图在Vue中的一个组件中添加一个自定义属性，如下所示：
middleware.js:
import { VueConstructor } from 'vue/types';
function eventPlugin(vue: VueConstructor): void {
const Socket = new someClass();
Object.defineProperties(vue.prototype, {
$socket: {
get: function get() {
return
浏览 1提问于2021-02-24得票数 2
我使用Vue CLI创建了一个新的Vue项目。我将App.vue更改如下：
<template>
<div id="app">
App.vue
</div>
</template>
<script>
import { populateTestData } from "./js/testData";
export default {
name: "App",
components: {},
mixins: [populateTestData],
meth
浏览 4提问于2020-10-10得票数 0
1回答
我想和webpack一起用Vue。我已经安装了所有的依赖项，但是在编译后我会发出警告：
Vue警告:在模板编译器不可用的情况下，您使用的是仅运行时构建的Vue。要么将模板预编译成呈现函数，要么使用编译器包含的构建。(发现于)
我的app.js：
import Vue from 'vue';
import test from './components/cartItem.vue'; // Simple <template> with string
new Vue({
el: '#js-cart-list'
});
我的pa
浏览 4提问于2017-04-13得票数 6
回答已采纳
我一直在跟踪和，用vue-test-utils和vue 2在Rails 5.1上用webpacker安装jest测试。我能够在没有vue组件的情况下运行基本测试，但是尝试挂载vue组件会导致错误：
TypeError: Cannot create property '_Ctor' on string 'PostAddress'
7 |
8 | it('mounts', () => {
> 9 | let wrapper = shallow('PostAddress
浏览 2提问于2018-03-20得票数 5
回答已采纳
1回答
我在Laravel有一个大项目，它有几个前端，取决于登录的用户。
我还有一个shared目录，其中有常见的组件(如表、模态等)。可用于不同的前端。
我希望将每个前端编译成一个不同的js文件，所以我只能包含每个用户的相关文件。
我现在拥有的：
webpack.mix.js：
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/frontendUser.js', 'public/js')
.js('resources/js/frontendA
浏览 0提问于2019-06-07得票数 3
我有两个独立的vue文件：-例如1.vue和2.vue以及一个主js文件。
我在window.App data: main.js中的方法下有一个变量main.js
我想以共享数据变量的形式访问这个变量，如何在我的两个vue文件中使用它。例如，1.vue将把一些数据放在这个变量下，而2.vue将访问这些数据。
浏览 4提问于2018-01-03得票数 1
回答已采纳
我有一个绑定在对象上的组件，父组件更改其对象的一个属性。子组件应该对更改作出反应。
次构成部分：
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
@Component({
props: {
value: Object,
}
})
class ValidatedSummaryComponent extends Vue {
value: any;
field = "Name&#
浏览 2提问于2018-07-11得票数 3
回答已采纳
以.vue组件为例，如何实现vuejs文档站点？ this example 我想在表单的.vue组件中使用简单的jquery select2插件。 但是给出的文档站点在.vue组件中的使用并不明确。
浏览 22提问于2019-03-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
