V-model不适用于动态添加的下拉列表
V-model是一种常用的前端开发框架中的双向数据绑定方式，用于将视图层和数据层进行关联。它通常用于实现表单元素和数据模型之间的数据同步。
然而，V-model不适用于动态添加的下拉列表。这是因为V-model是在组件初始化时绑定数据的，而动态添加的下拉列表是在组件运行时根据特定条件或用户交互动态生成的。由于V-model绑定的数据是静态的，无法实时更新到动态添加的下拉列表中。
对于动态添加的下拉列表，可以使用其他方法来实现数据的绑定和更新。一种常见的方法是使用事件监听器或自定义指令来实现数据的动态绑定和更新。通过监听下拉列表的变化事件，可以将选中的值实时更新到数据模型中，或者通过自定义指令来实现数据的双向绑定。
在腾讯云的产品中，可以使用腾讯云云开发（Tencent Cloud CloudBase）来实现动态添加下拉列表的功能。云开发提供了丰富的前端开发工具和服务，包括云函数、数据库、存储、托管等，可以帮助开发者快速构建和部署应用。具体可以参考腾讯云云开发的官方文档：腾讯云云开发
总结：V-model不适用于动态添加的下拉列表，可以使用事件监听器或自定义指令来实现数据的动态绑定和更新。腾讯云云开发是一个适合前端开发的云服务平台，可以帮助开发者快速构建和部署应用。
相关·内容
2回答
我有两个选择列表 <select id="praparat" v-model="selectedProduct">
<option v-for="(level1,index) in products"
:key="index"
:value="level1">{{level1.name}}</option>
</select>
<select
浏览 19提问于2020-01-27得票数 0
回答已采纳
1回答
我对Vue比较陌生，使用的是VueJS 2的最新版本。
我从数据库中获取了一组数据，如下所示：
{
count: 3,
options: {
'red': 10,
'blue': 20,
'green': 30,
'yellow': 40
}
}
我希望基于count的值(在本例中为3，但可以是任何数字)创建一些选择下拉列表。
在每个选择下拉列表中，我希望显示模型并根据我们必须创建的选择框数量动态地将v- options添加到它们(和Vue的d
浏览 2提问于2020-10-10得票数 0
这是我的下拉列表
<select id="productselect" aria-label="Single Select"
data-bind="ojComponent: {component: 'ojSelect', disabled: false,
value: productValue,optionChange: onChangeProduct,
rootAttributes: {style:'max-width:20
浏览 36提问于2018-02-04得票数 3
回答已采纳
我有一个从Vue模型中的数组填充的dropdown，如下所示： <!-- First dropdown -->
<select v-model="building">
<option v-for="building in buildings" v-bind:value="building.id">
{{ building.name }}
</option>
</select>
<!-- Entries Input -->
<input v-mode
浏览 17提问于2019-02-02得票数 2
回答已采纳
示例表单：
我想得到下拉式的标签值。当‘’设置为‘Yes’时，我能够从动态下拉列表中获得标签值(by attribute @ label )。但是，当“服务执行搜索”设置为“否”时，或者当我使用静态下拉列表时，我无法获得标签值。
在其他情况下，是否有可能获得标签值？
浏览 6提问于2020-06-23得票数 1
回答已采纳
我有一个使用vue-multiselect创建的自定义下拉列表。它应该是一个简单的下拉列表，将所选的选项作为标签列出。它可以工作，但当我添加其他下拉列表时，在一个下拉列表中选择的标签会出现在所有其他下拉列表中。如何才能使每个下拉列表只显示为其选择的选项，而不填充其他下拉列表？
下面是我的代码：
<multiselect
v-model="value"
tag-placeholder="Add this as new tag"
placeholder="Assesors"
浏览 5提问于2020-11-22得票数 0
1回答
在一个页面中，我有一个用户用来做搜索下拉列表。这些下拉列表是从数据库中动态创建的，因此不知道其中的数字。
结果显示在下一页，这也有所有的下拉在它。我需要在结果页中显示上一页的选定下拉值，但不确定从搜索页访问选定下拉值的最佳方式。
请指点
谢谢:)
浏览 0提问于2013-01-11得票数 1
回答已采纳
2回答
我应该如何创建链接的水平列表，以便溢出的链接仍然可以通过列表末尾的动态下拉菜单获得？
我希望能够创建一个链接(或按钮)的列表，当有足够的水平空间时，所有的链接都会显示出来。当没有足够的水平空间时，溢出的链接将出现在链接列表末尾的下拉菜单中。我使用的是Flex SDK 4.5.1。
此所需行为如下所示。
在尝试创建一个由多个部分组成的自定义组件，使用自定义布局和相当广泛但不成功的互联网研究之后，我还没有接近一个可行的解决方案。
我应该如何创建链接的水平列表，以便溢出的链接通过主列表末尾的下拉列表可用
浏览 0提问于2012-05-02得票数 2
回答已采纳
2回答
我得到了一个带有v型value的下拉组件，每当我在输入中输入密码或更改isHidden值时，我从下拉列表中选择另一个值-- v-if="value" div中的项不会重置，基本上我想重新呈现这个div，空所有输入并重置值，这可以实现吗？如果它在一个v-if里面，它不应该自动复位吗？
<Multiselect :options="passwordTypes()" v-model="value" />
<div v-if="value">
<input type="text" place
浏览 2提问于2021-08-25得票数 2
回答已采纳
1回答
我正在创建一个动态订单，您可以在其中添加一个新的下拉列表和文本字段到行中。我使用XML视图来创建元素，但与jQuery不同的是，它将相同的事件绑定到一个类，并使用$('.element'，parent)来访问父元素中的元素，使用appcelerator不能像使用$一样简单。还有身份证。
有没有人能用这种方式将一个函数应用到多个元素上？我知道我可以很容易地绑定事件，但是事件需要选择所选对象中的元素。目前我做这件事的唯一方法是使用一个小部件，但是如果仅仅为一个下拉菜单创建一个新的实例，这似乎是错误的，也是过分夸张的。
非常感谢
浏览 0提问于2016-02-15得票数 1
1回答
我如何在vue中创建动态下拉列表，不确定我做错了什么。
在我的html中我有..。
<div id="app">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option v-for="item in selected"></option>
</select>
浏览 2提问于2017-04-04得票数 6
回答已采纳
在初始页面加载时，我需要一个下拉字段：
当这个下拉列表中的项目被选中时，我需要用相同的项加载另一个下拉列表：
在同一程序之后：
我能够对其进行硬编码，但显然这不是一个好的实践，因为我的重复受我放了多少元素的限制，除了读取值外，还会成为一个问题，因为我对每个输入都有不同的v模型名称：
<div>
<label class='labelForm'>ORGANIZATION TO BE NOTIFIED:</label><br>
<select :class="{defaultSe
浏览 1提问于2018-08-14得票数 0
回答已采纳
我有一个包含对象集合的下拉列表。下拉列表默认根据条件进行绑定
<tr v-for="item in binSalesList">\
<template v-if="item.IsRemovedBin != isRemoved">\
<td>{{item.LotteryBinId}}</td>\
<td>
<select v-model="item.UpcDescription" v-on:change="upcList_Click(item)
浏览 19提问于2017-02-21得票数 2
回答已采纳
我有一个包含动态生成的字段的表单。提交的表单中可以有任意数量的字段，这取决于用户添加了多少字段。这是一个JSFIDDLE，您可以参考它来了解我动态生成的字段类型。
这个JSFIDDLE和我的项目唯一的区别是，我不是在一个集合中生成2个下拉列表和2个输入字段，而是在一个集合中生成3个下拉列表和1个输入字段。到目前为止，可以生成的集合数量最多为15个，用户可以从jsfiddle中的下拉列表中进行选择。
需要知道的是，如果用户生成了7个集合，我如何知道每个字段的名称，因为我必须使用PHP处理此表单的数据并提交到数据库。
浏览 1提问于2012-10-06得票数 1
回答已采纳
我已经阅读了如何在select/option列表上使用v-model的示例……当您有一个下拉列表时，这就解决了问题。
我的问题来了，因为我有x个下拉列表(根据我的模型返回的数据生成)。它是动态生成的，可能存在从0到4-5个下拉列表的任何内容。
该模型与这里的问题没有任何关系，但以下是我如何生成下拉列表：
<div v-if="item.FoodProperties">
<div v-for="fp in item.FoodProperties" class="col-xs-6
浏览 1提问于2017-10-31得票数 0
我使用vue-select。当我加载表单时，下拉列表中的项未被选中。当我打开下拉列表时，第一项被选中：
当我选择一个项目，并重新打开下拉菜单时，该项目被选中(正如预期的那样)
<div class="col-lg-6">
<div class="form-group row">
<label for="customer" class="col-sm
浏览 38提问于2020-02-17得票数 1
回答已采纳
我在这里面临一些问题，试图呈现第二个选择下拉列表。目前，我正在使用axios从API中获取数据。第二个选择下拉列表的选项取决于在第一个下拉列表中选择了什么。
JSON看起来如下所示：
{
"citizens": [
{
"id": 1,
"name": "Boy1",
"contact": [
{
"id": "1",
浏览 3提问于2020-08-14得票数 1
回答已采纳
我们动态地创建一个带有可编辑下拉列表的网页。但它不能在Chrome中编辑，它确实在IE中工作。下面是动态创建页面上的代码和结果。
AjaxControlToolkit.ComboBox comboBox = GetComboBox(i);
sControlID = comboBox.ID;
comboBox.TabIndex = (short)(i + 100);
if (ca.List != null)
{
string[] sList = ca.List;
Array.Sort(sList);
for (int j = 0; j < sL
浏览 6提问于2016-07-15得票数 1
回答已采纳
有没有一种快速的方法将空值添加到winforms应用程序的下拉列表中？我的一些下拉列表绑定到对象列表，还有一些绑定到datatable中的数据行。因为我正在设置数据源属性，所以我不能仅仅通过代码添加一个。有没有快速添加空白值的方法，或者我必须为每个下拉列表手动添加空白值？
浏览 3提问于2009-06-22得票数 0
回答已采纳
我最近在公司内部的一个网站上实现了Selectivizr，因为我们需要支持IE7/8。不幸的是，我们的站点通过jQuery/AJAX加载了很多动态内容。
为了解决这个问题，我重载了Selectivizr函数，让它在执行任何任务后重新加载jQuery。我的代码如下所示：
$(function () {
if ($('body.ie8, body.ie7, body.comp-view8, body.comp-view7').length > 0) {
(function () {
var original = jQuery.f
浏览 6提问于2012-10-09得票数 6
1回答
请找到附件中的UI，我正在尝试实现更清晰的上下文。
我可以使用+和-按钮来实现动态添加和删除下拉列表和文本框，但是is...selecting a item from one下拉菜单的问题也改变了other下拉列表的值。我怎样才能防止这种情况发生，同时又能获得每一行所需的数据呢？即股票代码和单位。
下面是一些相关的代码片段。
<template>
<div>
<div v-for="(stock, index) in stocks" :key="index" class="row">
<di
浏览 0提问于2020-07-02得票数 0
1回答
我有一个div，在其中加载动态内容。动态内容通常是一个具有多个输入元素的表单，包括下拉菜单。问题是，有时下拉列表在单击它们时会自动关闭。这种情况只发生在IE中。
浏览 5提问于2013-12-04得票数 2
回答已采纳
我是新来的，所以请原谅我，如果这是一个简单的问题。我有一个页面，动态地呈现一个select下拉列表，并根据一个名为filteredWidgets的计算属性动态填充其选项，该属性依赖于用户在其他下拉列表中所做的选择。标记如下：
<div v-if="filteredWidgets.length > 0">
<select id="widgetSelect" name="widgets">
<option value="">Select up to two Widgets<
浏览 0提问于2018-11-17得票数 0
回答已采纳
嗨，我有一个在前端的ExtJS代码。此页面上的下拉列表通过对第三方服务的web服务调用动态加载。我已经从这个页面导航到结果页面。
现在，在结果页中，我有一个按钮，允许用户返回到上一页。但下拉列表中的所有数据都应该保留。
我尝试了window.history.go(-1)和history.back()
伙计们请帮帮我。
浏览 4提问于2012-01-16得票数 0
1回答
你好，我现在使用的是Vue.js和打字本。我想定制界面。
有一个下拉列表，在选择项之后，应该在条目的上下文中调整接口。
<b-form-select
id="input-topic"
v-model="form.selectedTopic"
@change="createForm(form.selectedTopic)"
:options="dropdownTopics"
require
浏览 2提问于2020-07-04得票数 0
回答已采纳
在Oracle (rightNow)中，我想动态地更改ProductCategoryInput小部件的选定值，该值已经使用属性name="Incident.Products“设置。
例如，如果我有两个单选按钮：
雇员。
学生。
因此，如果单击employee，ProductCategoryInput小部件选择的值将更改为信息技术。
而且，如果您单击了学生，ProductCategoryInput小部件选择的值将更改为“教育事务”。
总之，我希望使用JS动态触发ProductCategoryInput下拉列表值。
浏览 2提问于2021-02-14得票数 0
我是的新手。我在尝试根据一个select的选定值动态设置另一个select的选项时遇到了困难。
例如，我有两个下拉列表，分别名为division和division。
var A = [{1: 'a'},{2:'b'}];
如果A的值为1，则地区选择应加载相关代码。我可以用jQuery实现，但不能用Vue实现。
这是我的模板。
<div class="form-group" :class="class_obj">
<select name="div_code" v-model="div_
浏览 14提问于2017-07-14得票数 1
回答已采纳
2回答
我创建了一个组件"my-item“，它包含三个元素:一个下拉列表(由”itemList“填充)和两个从下拉列表填充的输入框。此组件被视为一行。
我试图一次添加和删除一行，但有两件事我不确定。(1)向行数组添加什么？(2)为什么this.rows.splice(index,1)只删除最后一行？
谢谢
<div id="app">
<my-item v-for="(row, index) in rows"
:itemdata="itemList"
v-on:remove=
浏览 3提问于2016-12-29得票数 23
回答已采纳
我在vue.js中有以下动态表/行，并且我使用bootstrap-select来获得更好的下拉选择。表单有一个动态的添加/删除行。我无法使用bootstrap select加载select的选项。select显示在每行上，但不显示下拉列表。我做错了什么？
我的来了
HTML：
<div id="app">
<table class="table">
<thead>
<tr>
<td><strong>Date</strong></td&
浏览 4提问于2017-11-20得票数 1
我正在使用vuejs中的引导-vue创建一个简单的下拉列表。我的组成部分中的代码如下：
<b-col sm="2">
<b-dropdown :text="selectedItem" v-model="selectedItem">
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dr
浏览 0提问于2018-03-28得票数 1
回答已采纳
有人能帮助解决这个问题吗？我有一个动态选择下拉列表。默认情况下，第一个默认选项“选择您的位置”不可见。这是因为v-model。我怎么才能让它工作呢？我的父组件： <template>
<div>
<Segments @select-segment-location-event="updateSegmentLocation" :segmentLocation="segmentLocation" />
</div>
</template> 我的子组件： <template>
&
浏览 33提问于2021-03-31得票数 0
回答已采纳
1回答
我有一个下拉列表： <BaseDropdown
@input="value => statusSelected(value)"
name="Status"
ref="status"
label="Status:"
rules="required"
:options="statusItems"
浏览 25提问于2020-08-13得票数 0
2回答
我在教自己vue 3。我读过一篇又一篇关于v-model的文章，每次我认为我理解它的工作原理时，我都会再次感到困惑。
我的目标是:我构建了一个自定义下拉组件。我需要控制这个下拉列表的值的能力。当下拉列表发生变化时，我希望让父对象知道新的值和索引。
儿童component.vue
<div>
<select
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
<
浏览 16提问于2022-05-08得票数 0
回答已采纳
1回答
我有一个JQGrid，当打开行进行内联编辑时，我会在列中显示一个下拉列表。此下拉列表显示数据库中已经可用的列表项。当我从clientArray中保存网格时，更新的数据将保存在数据库中。
现在，我需要一个选项，在这个下拉列表中添加一个新项，并将该项添加到数据库中，以便下次用户查看下拉列表时，新项将可用。
有谁能帮忙找出是否有任何选项可以用输入文本框进行下拉列表，以便在运行时将一个新项添加到下拉列表中。
下面是我用来显示下拉列表的示例代码。
mygrid = jQuery("#list").jqGrid({
url:url,
datatype: "json"
浏览 1提问于2016-09-23得票数 0
2回答
我有以下脚本：
如何根据下拉列表中的字符为下拉框指定动态宽度？例如，如果“导航1”是“这是导航中的第一项”，我如何使整个下拉列表的宽度自动变宽，而不影响导航按钮的大小，这会在鼠标悬停时导致下拉列表？
基本上，我不想在下拉列表中使用文本换行，但同时，我也不想让下拉列表变得更宽。
浏览 2提问于2011-02-12得票数 1
回答已采纳
1回答
我需要在OTRS的New Ticket屏幕中添加一个下拉列表。我设法添加了一个下拉列表，在管理部分的Dynamic Fields Management帮助下添加了一个动态字段。
现在我的问题是，我想用运行时从某个远程数据库中获得的数据填充这个下拉列表，这些数据依赖于登录的用户。如何在OTRS的DropDown列表中输入此动态数据？
谢谢。
浏览 0提问于2013-07-05得票数 4
我需要使用JQuery获取所选动态创建的选择下拉框的值。 示例： 如果我从第一个下拉列表中选择了值Red，Jquery应该会警报值为"red“。 如果我从第二个下拉列表中选择另一个值，则下一个Jquery应该会警告该选定值。这些下拉列表是动态创建的下拉列表。 <select class="" id="part_no0" name="part_no[]">
<option value="red">Red</option>
<option value="green&
浏览 25提问于2018-08-13得票数 0
回答已采纳
1回答
我有一个动态数据网站，在向表中插入一条记录时，显示为下拉列表的外键关系使用了错误的select item文本值字段。
如何更改下拉列表，以便在处理此表时，它将使用不同的列作为下拉列表中的值？
谢谢
浏览 1提问于2009-11-04得票数 1
回答已采纳
有一个下拉列表，如果用户选择一个选项，一些Q选项卡面板将显示/隐藏以做出响应。但是如何通过代码动态设置Q-tab面板的显示/隐藏呢？希望有人能在这里给出建议。谢谢 <q-select filled
v-model="datasource.datasourcetype"
:options="datasource.options"
option-value="value"
浏览 97提问于2021-04-24得票数 0
1回答
我有一个mvc3 application.In，我正在使用剃须刀视图。我有一些与动态隐藏和取消隐藏控件相关的问题，还可以动态地创建控件。
问题：
，我想根据某些表单控件的值动态隐藏或取消隐藏某些div标记，而不使用java脚本。例句:就像我有一个下拉列表来选择value..If一样，选择的值是"other“，然后需要显示一个文本框(最初是隐藏的)。我希望根据表单上下拉列表的值动态创建多个下拉列表，还想显示一些数据来选择任何动态创建的下拉项目。我有一个下拉列表"List1“，其中包含两个值ex value1和value2..If，我们从下拉列表中选择value1，然后如何动态地创
浏览 3提问于2011-06-14得票数 0
我正在尝试使用Vuetify v对话框中的Quill.js编辑器，但当用户在当前打开的下拉列表之外单击时，工具栏下拉菜单不会关闭。
我做了一个js小提琴：
<div id="app">
<v-app>
<quill-editor v-model="content"></quill-editor>
<v-dialog v-model="dialog">
<quill-editor v-model="contentKo">&
浏览 2提问于2019-03-10得票数 2
在datastudio中，是否可以链接下拉控件中的选择(让我们将字段customer_name放在列表中，，所以这是一个动态列表，而不是硬编码的 !)有一个参数(假设是@param_customer_name)。
因此，当用户从下拉控件中选择一个客户时，它会用所选的值填充参数@param_customer_name，然后我可以在BigQuery中启动一个BigQuery？谢谢你的帮助！
浏览 2提问于2021-08-30得票数 1
1回答
我正面临着semantic-ui-vue dropdown的问题。 这是我的沙箱链接：https://codesandbox.io/s/3qknm52pm5。 在我的沙箱中，我有两个下拉列表：From和To。 由于键不匹配，From显示了正确的值，而To没有。 我的App.vue包含以下脚本 <script>
export default {
data() {
return {
from: [],
to: [],
fromCollection: [
{
value: "abc@gmail.
浏览 14提问于2019-04-22得票数 2
回答已采纳
我的表格上有个下拉字段。当我从下拉列表中选择一个值时，它会立即将焦点重置到窗体的顶部。
更清楚的是，我在屏幕顶部有一个图像和几个输入字段。用户必须向下滚动到实际的下拉字段才能选择它。一旦他们选择了这个值，页面就会滚动回顶部。
当用户从下拉列表中选择一个值时，如何保持窗体上相同的位置？
我的下拉列表设置为：
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default form-cont
浏览 4提问于2016-06-16得票数 0
回答已采纳
我有几个下拉框，上面有I country1，country2，...在下拉列表中更改国家/地区时，应在警告框中显示国家/地区的值。
如果我像这样为一个框添加onchange处理程序，它会工作得很好：
$('#country1') .live('change', function(e){
var selectedCountry = e.target.options[e.target.selectedIndex].value;
alert(selectedCountry);
});
但我需要为所有下拉框动态执行此操作，因此我尝试了
浏览 0提问于2013-01-04得票数 3
回答已采纳
我试图在下拉列表中添加一个动态输入，因为我使用的是vue-serach-select，让我展示我的代码，然后详细发布。
<template>
<button @click="addRow1"></button>
<table class="table table-striped">
<thead>
<tr style="font-size: 12px; text-align: c
浏览 0提问于2018-07-17得票数 2
回答已采纳
我在我的Vue JS应用程序中有这个lop：
<b-form>
<table class="table">
<thead>
<tr>
<th>Import Field</th>
<th>Project Field</th>
<th>Select</th>
</tr>
浏览 8提问于2022-07-14得票数 1
我有一个包含5个元素的下拉列表。我的问题是我想让这个下拉列表是可编辑的。基本上，用户可能想要删除其中一个元素，也可能想要添加更多元素。在asp.net中做这件事的好方法是什么？
浏览 0提问于2011-05-20得票数 0
1回答
我使用Vuetify创建我的下拉列表。我可以选择一个值，将其推送到firebase数据库，但是刷新页面时，我无法填充下拉列表。
下面是模板：
<template>
<v-select
v-bind:items="itemsPhone"
v-model="telephoneType1"
id="telephone-pro-type-1"
label="Select"
浏览 1提问于2017-11-20得票数 0
回答已采纳
2回答
我有一个父组件和多个子组件，它们使用相同的支柱。这个支柱是element.js中下拉菜单的键数组。当孩子第一次呈现时，它们不包含任何数据。然而，一旦从到达的钥匙使用vuefire，孩子们得到下拉菜单项。然而，元素下拉菜单并没有按它应该的那样重新设置。但是，使用vue dev工具，我可以看到下拉菜单条目已经作为键传递下来了。当vue完成热重新加载时，由于文件更改，这些键将加载。一旦加载了条目，我就可以选择条目，一切都按预期的方式工作。
我还使用vuetify下拉列表和HTML下拉列表获得了相同的结果。两者都有相同的问题。
父级
<template>
<div class=&
浏览 0提问于2019-07-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
