vue，通过v-model绑定所选选项中的两个值
Vue是一种流行的前端开发框架，它通过v-model指令提供了一种简单而强大的方式来绑定表单元素和应用程序数据之间的关系。v-model指令可以用于各种表单元素，如输入框、复选框、单选框和下拉列表等。
v-model绑定所选选项中的两个值的具体实现方式取决于所使用的表单元素类型。以下是几种常见的情况：
- 输入框： 当使用v-model绑定一个输入框时，所选选项中的两个值分别是输入框的值和数据对象中的属性。通过在输入框上使用v-model指令，可以实现双向绑定，即输入框的值会自动更新到数据对象中，同时数据对象中的值也会自动更新到输入框中。例如：
- 输入框： 当使用v-model绑定一个输入框时，所选选项中的两个值分别是输入框的值和数据对象中的属性。通过在输入框上使用v-model指令，可以实现双向绑定，即输入框的值会自动更新到数据对象中，同时数据对象中的值也会自动更新到输入框中。例如：
- 在上述代码中，
dataValue是一个数据对象中的属性，它将与输入框的值进行双向绑定。 - 复选框： 当使用v-model绑定一个复选框时，所选选项中的两个值分别是复选框的选中状态和数据对象中的属性。通过在复选框上使用v-model指令，可以实现复选框的选中状态与数据对象中的属性之间的双向绑定。例如：
- 复选框： 当使用v-model绑定一个复选框时，所选选项中的两个值分别是复选框的选中状态和数据对象中的属性。通过在复选框上使用v-model指令，可以实现复选框的选中状态与数据对象中的属性之间的双向绑定。例如：
- 在上述代码中，
isChecked是一个数据对象中的属性，它将与复选框的选中状态进行双向绑定。 - 单选框： 当使用v-model绑定一组单选框时，所选选项中的两个值分别是选中的单选框的值和数据对象中的属性。通过在每个单选框上使用v-model指令，并将它们的值设置为相同的数据对象属性，可以实现单选框的选中状态与数据对象中的属性之间的双向绑定。例如：
- 单选框： 当使用v-model绑定一组单选框时，所选选项中的两个值分别是选中的单选框的值和数据对象中的属性。通过在每个单选框上使用v-model指令，并将它们的值设置为相同的数据对象属性，可以实现单选框的选中状态与数据对象中的属性之间的双向绑定。例如：
- 在上述代码中，
selectedOption是一个数据对象中的属性，它将与选中的单选框的值进行双向绑定。
通过v-model绑定所选选项中的两个值，可以方便地实现表单元素与数据对象之间的双向绑定，从而简化了前端开发中的数据处理和状态管理。在Vue中，v-model是一个非常强大且常用的指令，广泛应用于各种表单交互场景。
腾讯云提供了一系列与Vue开发相关的产品和服务，例如云服务器、云数据库、云存储等，可以满足不同规模和需求的项目。具体产品和服务的介绍和链接地址可以在腾讯云官方网站上找到。
相关·内容
当使用vue.js的v-model绑定<select>元素时，如何获得所选的选项文本而不是所选的选项值？
在HTML中：
<select v-model="selected" options="myOptions"></select>
在JS中：
myOptions: [{ text: 'Blue', value: '1' }, { text: 'Green', value: '2' }]
我想要检索的是文本'Blue‘以及值'1’，方法是执行类似
浏览 1提问于2015-05-23得票数 6
4回答
我一直在尝试了解Vue的v-model如何与自定义输入和常规输入组件一起工作。
我见过v-model绑定到组件和模板中的值的示例，这两个值将是不同的。我对此感到非常困惑，我认为这可能是对“双向绑定”的误解。如何将输入绑定到两个值。
示例：
//v-模板中的model
const myCustomInput = ('my-custom-input', {
data() {
return {
myObj: 'hello'
}
},
template: `<input v-model="myObj" >
浏览 2提问于2019-09-16得票数 1
可以传输一些数据吗？
在我的vue组件(子组件)中，我有：
{{ checked.length }}
负责所选项目的数量。
但是我需要在另一个div(父vue)中显示该信息，它不在视图组件中。
更新:子组件
<template>
<ul class='filter-content__list' v-if='toggle'>
{{ checked.length }}
<li v-for='item in itemsData' :key='item.id'>
<label class=&
浏览 0提问于2021-11-19得票数 0
我有一个可用的vue/laravel组件，其中我在选择框中使用了v-for循环，以便从vue数组创建选项。这可以正常工作。
我的v-bind正确地将所选选项的id绑定到featureID，但这里是我的问题：
我怎样才能把feature.feature_name绑定到featureName这样的道具上呢？
我不知道如何将所选选项的ID和名称绑定到两个不同的道具上？
<select v-model="featureID">
<option v-for="feature in features" v-bind:value="feature
浏览 53提问于2019-11-20得票数 2
1回答
如何显示来自所选选项的数据，如docs 中的示例，但使用组件？
<div id="app">
<selection></selection>
<div v-if="post">
selected post:
{{post.title}}
</div>
<div v-else>
no posts
</div>
</div>
main.js
Vue.component('selection', {
templ
浏览 2提问于2016-10-09得票数 2
回答已采纳
我在b-form-datalist中使用b-form-input。输入文本框将动态添加(每行一个)。
首先，它列出了一些条目。一旦选择了一个值，所选的值将使用v-model添加到列表中。
<div id="app">
<div v-for="(chosen, index) in chosenValues" :key="chosen.value + '-' + index">
<b-col cols="4">
<b-form-input
浏览 2提问于2019-11-13得票数 0
Vue.js有一个，演示了如何构建包装按钮的功能组件：
<template functional>
<button
class="btn btn-primary"
v-bind="data.attrs"
v-on="listeners"
>
<slot/>
</button>
</template>
但是，我如何构建一个类似的使用select的组件，然后我可以在其父组件上使用v-model呢？
我想出了以下方法，但当我在上面使用v-model时
浏览 58提问于2019-03-26得票数 2
回答已采纳
3回答
我在v-select中放置了v-模型，但是它返回整个对象。
<div id="app">
<h1>Vue Select - Using v-model</h1>
<v-select v-model="selected" :options="options" value="id" label="labels">
</v-select>
{{selected}}
</div>
Vue.component('v
浏览 0提问于2019-03-07得票数 2
回答已采纳
3回答
我有一个和父组件一样共享v-model的组件。代码如下： Vue.component('greeting', {
template: '<input type="text" :name="name" v-on:input="updateSearch($event.target.value)"> ' ,
props: ['name'],
methods: {
updateSearch: function(value) {
this.$emit('
浏览 7提问于2019-03-15得票数 0
回答已采纳
我使用的是Laravel 7和Vue.js 2。
当用户更改所选选项时，我希望捕获所选文本。
这是我的组件：
<template>
<div class="container">
<div>
<title-form v-model="titleForm" :titleMessage="titleForm"></title-form>
</div>
<hr>
<di
浏览 93提问于2021-02-13得票数 1
回答已采纳
1回答
使用Vue.js (和Laravel)构建一个项目，以下代码(非常简化)将导致以下错误：
Vue组件：
<template>
<input type="text" class="form-control" v-model="main_object[item_id][my_answer_key]">
</template>
<script>
export default {
props: [
],
data() {
浏览 1提问于2016-04-16得票数 2
1回答
我有我的费用追踪应用程序。我在增加开支方面有问题。我有两个组件负责这一点: addCategory.vue和selectCategory.vue。
这是我的selectCategory.vue组件：
<template>
<div>
<select class="custom-select" @selected="this.$emit('select-cat',category)">
<option v-for="category in categories">
浏览 0提问于2018-05-16得票数 0
当我看到问题是什么时，我肯定会踢自己，但我试图使用vue-select来编辑所选项目中的字段。 本质上，我希望在组件外部修改传入的v-model，并让组件更新所选项目以及视图。选项属性不变。 描述问题的最好方法是示例，我已经在codesandbox上发布了示例，示例中有一个项目列表，其中包含课程名称和认证id (在现实生活中，这是mongodb objectId)。我希望能够选择这些项目之一，并能够通过输入(课程名称)和v-select认证编辑它。v-select具有可用证书列表，其中包含人类可读的描述(在本例中为name)，我希望能够使用下拉框选择所需的证书并填充已编辑的项目条目。 所有这
浏览 18提问于2019-04-26得票数 0
我在中看到，您可以在具有options属性的select标记中动态生成option标记，如下所示：
<select v-model="selected" options="myOptions"></select>
但是它在Vue.js 2.0中不起作用，我必须使用v-for指令。这个特性在2.0版中被删除了吗？
浏览 1提问于2018-06-29得票数 1
回答已采纳
3回答
获取vue-选择值不起作用
、、、、
我试图从vue-select中获取所选的值，但是已经使用了所有的方法并搜索了帮助，但这是否有效，我也会在页面加载时触发警报。
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{id: 1, label: 'foo'},
{id: 3, label: 'bar'},
{id: 2, label: 'baz'},
],
浏览 2提问于2018-02-13得票数 3
回答已采纳
1回答
我想在变量中存储html。示例：
data: function() {
return {
my_html: '<input type="text" v-model="data"'
}
}
我希望在数据中接收用户在字段中输入的值。但是，这个连接并不是完整的例子：
var test = new Vue({
el: '#some_id',
data: function() {
return {
data: '',
my_html: '<input
浏览 0提问于2018-12-06得票数 4
回答已采纳
1回答
我想要创建一个由两个下拉列表组成的可重用组件。对于下拉列表，我使用的是vue-select，我希望能够将两个下拉值绑定到一个变量中。到目前为止，我所做的就是：
ReusableMultiDroddown.vue
<template>
<div class="container">
<div class="row">
<div class="input-group">
<
浏览 0提问于2018-09-05得票数 2
回答已采纳
我有一个vue date组件，它由一个vue-flatpickr组件组成。当然，当我将配置选项作为props传入时，它们会按预期工作，但是，如果想要更改其中一个配置选项(这应该是可能的)，它不会向下传播。我不是Vue大师，任何建议都会有帮助。 我使用的是Laravel应用程序中的页面组件，它不应该是相关的，但是，以防有人用vuex或vue-router回答，这些在这里不起作用。 以下是page.vue提供的表单元素： <material-select
name="specialist"
label="Specialist"
def
浏览 39提问于2019-05-04得票数 1
3回答
:selected道具在使用v-model进行select时，不会在Vue2中选择目标v-model：
模板
...
<select v-model="form.item">
<option :value="item.id" v-for="(item, index) in items" :selected="item.status == 2">{{ item.name }}</option>
</select>
...
脚本
data: function () {
r
浏览 12提问于2017-10-16得票数 15
回答已采纳
我想将其中一个可用的<option>标记设置为默认值。在<select>标记上，我使用的是v-model，并且我知道vue.js文档对此声明如下：
v-model将忽略在任何表单元素上找到的. selected属性。它将始终将Vue实例数据视为真理的来源。您应该在组件的data选项中，在JavaScript端声明初始值。
因此，我在使用variable的selected属性，直接将true传递给它，或者通过data选项中的一个变量传递。不幸的是它不起作用了。这是一个。
下面是示例代码：
HTML
<div id="app">
&l
浏览 1提问于2020-01-03得票数 2
回答已采纳
<span class="input-group-btn" style="min-width: 100px">
<select class="form-control" v-model="field.related_field">
<option value="null"></option>
<option v-for="f in fields" v-bind
浏览 2提问于2017-10-21得票数 2
回答已采纳
1回答
我有两个组件--搜索过滤器，以及相同组件App.vue中的迭代器，如下所示：
App.vue
<v-text-field
:search="search"
v-model="search"
label="type here to filter"
>
</v-text-field>
<v-data-iterator
:items="sortedContents"
:search="search"
v-model="selected"
>
浏览 3提问于2018-03-05得票数 2
回答已采纳
我正在构建一个应用程序，将生成一个客户反馈接收的动态表单。现在，在向表单添加字段时，单个字段具有包含length和type规则的验证规则，每个验证规则上也将有一个属性，该属性将确定在验证字段时是否应该解析该特定规则。 我有一个名为fields的Vue data属性，每个字段都有一个对象。它看起来是这样的： export default {
data() {
return {
fields: [{
label: 'Email',
validation: {
浏览 22提问于2019-09-05得票数 0
1回答
邮寄表格空数据
、、
对于我来说，NuxtJS应用程序有多个组件，它们以一种形式组合在一起。在这里，代码：
AppButton.vue
<template>
<button
class="button"
:class="btnStyle"
:disabled="disabled"
v-bind="$attrs"
v-on="$listeners"><slot /></button>
</template>
<script>
浏览 1提问于2018-03-12得票数 0
回答已采纳
1回答
我尝试根据所选的值使用两个选择列表筛选我的列表。好像我的电脑过滤器坏了？
您应该能够过滤“Price from”和“Price to”上的列表
List.vue My属性：
filteredData() {
const LowerCaseSearch = this.search.toLowerCase();
return this.products.filter(
product =>
(product.name.toLowerCase().includes(LowerCaseSearch) ||
product.category.toLowe
浏览 1提问于2020-06-19得票数 0
回答已采纳
我是新手，坦白地说，我找不到我想做的事。当我找到它的时候，它对我没有用。
我有一个输入，我希望输入到这个输入中的值用“货币”来写，但是我无法成功。
示例:当1000写入输入时，当输入退出时，我希望写入1000，00。
"vue": "^2.6.12",
Person.vue
<CurrencyInput v-bind:model-value="value" :options="{ currency: 'EUR' }" />
<CurrencyInput :model-value="v
浏览 2提问于2021-08-22得票数 1
回答已采纳
4回答
我尽量简单地解释它。我有这样的东西。简单的Vue root，Vuex存储，并在导航栏id中输入v-model。
输入不是反应性的.为什么？!
HTML
<div id="navbar">
<h2>@{{ test }}</h2>
<input v-model="test" />
</div>
store.js
import Vuex from 'vuex'
export const store = new Vuex.Store({
state:
浏览 1提问于2017-03-13得票数 9
3回答
我将从多个select字段中选择一个选项，并更新所选对象的prozent值：
<div id="assistenzen">
<form>
<select v-model="assistenz" multiple>
<option v-for="option in options" v-bind:value="option">
{{ option.text }}
</option>
</select>
浏览 7提问于2016-12-09得票数 1
回答已采纳
我有以下vue组件
<template>
<div id="input-div">
<label v-if="label">{{ label }}</label>
<select :multiple="multiple" :value="value" @change="change($event.target.value)">
<slot></slot>
</select>
浏览 2提问于2017-07-27得票数 2
1回答
我在一个表单中有两个独立的下拉列表。代码如下： <form v-on:submit.prevent="submitForm">
<div>
<label for="tenant">Tenant</label>
<select
class="form-select"
name=""
浏览 27提问于2021-09-08得票数 1
回答已采纳
1回答
我是否在此Vue模板表单中错误地获取了选定内容的值？
<select class="form-control" v-model="object.property">
<option selected="selected" value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
浏览 0提问于2017-11-15得票数 0
我有一个带有一些输入的表单，我提交表单并以一个模式显示数据。它可以工作，但我不确定我这样做是正确的，而且代码看起来很混乱。
--这是的样子(为了简单起见，没有模型)：
<div id="app">
<form @submit.prevent="getValues">
<label>Last Name: </label><input type="text" name="lastName">
<br>
<button>Sub
浏览 7提问于2020-02-10得票数 2
回答已采纳
我在vue组件中有一个下拉列表，希望获得所选的选项值。
<select class="form-control" v-model="selected" >
<option v-for="user in users" v-model="kudouser" v-bind:value="user.id" >{{ user.id }} {{ user.first_name }} {{ user.last_name }}</option>
&
浏览 6提问于2019-06-20得票数 0
回答已采纳
3回答
我有一个简单的表单组件，只有一个选择选项。每当我选择一个选项时，都会在主组件中呈现一个子组件。我的问题是我无法让Vue将父组件数据绑定到子组件数据。
form.settings是动态的，所以我不能在Form.vue之前设置属性。
此表单通过axios提交给Spring应用程序，我在提交表单时看到客户端的form.settings为null。
我是Vue的新手，以下是我的尝试：
Form.vue
<template>
<div>
<form>
<div>
<select v-model="for
浏览 7提问于2020-03-17得票数 0
回答已采纳
我正在尝试制作一个表单来编辑您在Vue/Laravel中的用户帐户。
理想情况下，我想使名称和电子邮箱预先填充用户当前的价值。我可以很容易地用
<input type="text" class="form-control" name="user" autocomplete="false" :value="$parent.user.name">
问题是，我还想像这样使用v-model="form.name"：
<template>
<form class="
浏览 1提问于2018-06-12得票数 0
我试图使用描述的v-model模式将select包装到Vue自定义组件中。
我面临的问题是，对于我的自定义选择组件，我得到了以下错误消息：
Vue警告:避免直接变异一个支柱，因为每当父组件重新呈现时，值都会被覆盖。相反，使用基于支柱值的数据或计算属性。道具变异：“价值”
找到位置
->
然而，当我使value成为一个数据属性时，我就失去了预期的功能。也就是说，当绑定值发生变化时，复选框不会更新。双向绑定失败了。
什么是正确的方式来维持我期待的行为而不提出警告？
下面是一个演示问题的交互式示例(最好在全屏上看到)。
Vue.component('dynamic-selec
浏览 0提问于2021-03-10得票数 5
回答已采纳
也许我做错了，但是当将v-如果绑定到两个不同的输入字段时，它只有在输入值没有改变的情况下才能工作。
var app = window.app = new Vue({
el: '#admin-app',
data() {
return {
language: "en"
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.js"></script>
<script src="
浏览 0提问于2016-11-17得票数 1
回答已采纳
1回答
我有一个嵌套数据的绑定select：
<select class="form-control" v-model="user_profile.sport.sport_id">
<option v-for="sport in sport_information.sports" :value="sport.sport_id">{{ sport.sport_name }}</option>
</select>
数据是从AJAX调用接收的。在本例中，user_pro
浏览 2提问于2017-01-25得票数 0
1回答
我希望将两个quill editor元素呈现到一个vue组件中。编辑器应该有自己的v-model附加到它们，以便他们可以发送数据到不同的数据库。我想通过description支柱来区分这两个编辑器元素。
component.vue
<p>Description:</p>
<text-editor description="true"/>
<p>Content:</p>
<text-editor/>
因此，如果description="true"触发一个v-if指令并呈现相应的编辑器元素。
t
浏览 6提问于2022-03-18得票数 0
3回答
是否可以预先设置选择框的选定值？
使用Vue (v2)，我尝试在Vue模板中创建如下所示的选择框。
<select v-model="selectedFlavor">
<option v-for="flavor in flavors"
:value="flavor"
:selected="selectedFlavor == flavor">{{ flavor }}</option>
</select>
和一个类似这样的组件：
Vue
浏览 3提问于2018-01-24得票数 7
回答已采纳
1回答
我在Vue中创建了一个自定义输入组件
<template>
<input :type="inputType" :placeholder="placeholder" v-model="vModel" />
</template>
<script>
export default {
name: "BaseInput",
props: {
inputType: String,
placeholder: String,
label: String,
浏览 4提问于2021-06-08得票数 0
回答已采纳
我使用来呈现一个select输入。一切都很好--我能够根据所选择的选项获得值并更改UI。
我正在尝试更改我页面上的标题文本--作为所选选项的文本。我使用一个来呈现我选择的输入中的选项。
下面是我使用的模板：
<b-form-group
id="mySelect"
description="Make a choice."
label="Choose an option"
label-for="mySelect">
<b-form-select id="mySelect
浏览 4提问于2020-01-02得票数 0
回答已采纳
我在我的main.js中创建了一个全局对象，用于访问在控制器之间的整个应用程序中登录的用户数据
main.js
Vue.prototype.user = getUser() // assume a method to getUser data
现在，上面的.user对象将在具有this.user的其他组件中可用，
我正在寻找的是，如果我在任何组件中对this.user进行更改，这些更改也会反映到其他组件上，这不是现在发生的事情。
我有两个组件，一个用于更新this.user EditProfileComponent.vue中的数据
<input type="text" v
浏览 6提问于2018-01-01得票数 1
回答已采纳
在提交之前，我要为验证表单签署vue js。这段代码启动了一个从ID = app获取数据的新Vue
const app = new Vue({
el:"#app",
data:{
text: null
}
我希望创建一个名为form-number的自定义属性，并获取数据--指定我的属性，而不是div。
示例：
改变这个
<form id="app" method="post">
<input type="text" v-model='text'>
浏览 13提问于2020-05-24得票数 0
回答已采纳
我有一个Vue应用程序，它的输入元素绑定到如下所示：
<template>
<input v-model="this.$store.state.myvalue"/>
</template>
和VueX store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
myvalue: null
},
mutati
浏览 4提问于2019-11-30得票数 3
回答已采纳
在我的Vue 3.0.5应用程序中，我希望通过单选按钮在<div>元素之间切换，即一次只显示一个元素。如果我在输入元素中的value参数前面加上了v-bind，虽然我已经用v-model赋值了，那么它就能工作。但是，我不明白为什么。
我还使用单选按钮来选择升序/降序(我实现了一个用于排序的computed函数，该函数使用了asc/desc的变量)：这在没有v-bind的情况下有效。
我不清楚为什么这种行为是不同的。有人能解释吗？
使用v-bind的示例
<!DOCTYPE html>
<html>
<head>
<script
浏览 1提问于2021-02-11得票数 0
回答已采纳
2回答
我使用Vue.js 2，我有一个数组，这个数组是从这个API调用(这个调用)获得的，我用这个调用在select中创建了一个select：
"genres": [
{
"id": 28,
"name": "Azione"
},
{
"id": 12,
"name": "Avventura"
},
{
浏览 1提问于2021-05-03得票数 0
回答已采纳
1回答
我需要在v模型中做一个简写，但是eslint给出了折叠的问题：
vue/ valid model 'v-model‘指令需要属性值，该属性值作为LHS.eslint-plugin-vue有效。
所以密码有效。但这并不是它需要的工作方式。这是我现在的代码
<v-text-field
v-show="field.type == 'String'"
v-model="_isMultiple(content_data[tabindex]) && subitem != null ? content_data[tabindex][
浏览 1提问于2020-01-14得票数 0
我正在将Vue.js添加到Rails 6应用程序中。该项目使用涡轮筒，因此" Vue - turbolinks“是通过纱线安装的，我的Vue配置如下所示：
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
Vue.use(TurbolinksAdapter);
document.addEventListener('turbolinks:load', () => {
const app = new Vue({
浏览 2提问于2020-12-29得票数 3
回答已采纳
当输入字段为空且用户试图提交表单而不输入值时，我试图将输入字段设置为红色。当用户试图提交表单而不使用vue.js输入任何值时，字段边框应变为红色。在填写表格之前，表格不应提交。
html
<template>
<div id="border_red">
<input id="name" name="name" v-model="name"/>
<input id="name" name="name" v-model=
浏览 1提问于2021-05-27得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
