Vue v-model未选中复选框上的值
Vue的v-model指令是用于在表单元素和Vue实例的数据之间建立双向绑定关系的。当使用v-model指令绑定到一个复选框上时，未选中复选框的值将不会被包含在绑定的数据中。
具体来说，当一个复选框被选中时，v-model绑定的数据将被设置为复选框的value属性的值；当复选框未被选中时，v-model绑定的数据将被设置为undefined。
Vue的v-model指令可以用于多个复选框的情况，此时绑定的数据应该是一个数组，每个被选中的复选框的value值将会被添加到数组中。
以下是v-model未选中复选框上的值的示例代码：
<template>
<div>
<input type="checkbox" id="checkbox1" value="option1" v-model="selectedOptions">
<label for="checkbox1">选项1</label>
<br>
<input type="checkbox" id="checkbox2" value="option2" v-model="selectedOptions">
<label for="checkbox2">选项2</label>
<br>
<input type="checkbox" id="checkbox3" value="option3" v-model="selectedOptions">
<label for="checkbox3">选项3</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: []
};
}
};
</script>在上述示例中，selectedOptions是一个数组，当复选框被选中时，对应的value值将会被添加到selectedOptions数组中；当复选框未被选中时，对应的value值将会从selectedOptions数组中移除。
关于Vue的v-model指令和复选框的更多信息，你可以参考腾讯云的Vue.js文档：Vue.js - 复选框。
相关·内容
我正在尝试根据某些条件选择复选框。
选择所有复选框(选中所有复选框)
选择“所有未读”(选择“数据数组未读状态的所有未读”)
选择all read (选择all read；在数据数组具有读状态的位置)
我能够选中复选框上的所有复选框，但无法通过链接选择它。
我还需要获取所选复选框的ids，以便对这些选中的复选框执行操作。
你们能看看这个吗。
new Vue({
el: "#app",
data: {
selected: [],
messages: [{
id: 1,
text: "Learn Java
浏览 3提问于2018-06-08得票数 0
1回答
我正在使用Bootstrap vue。并且我尝试在一个复选框上选中我的b表中的所有复选框。我的复选框在名为"selected“的槽中的b-table in标签中。
<b-table id="myTabel"
head-variant="light"
:items="items"
:fields="fields">
<template slot="selected" slot-scope="
浏览 26提问于2020-02-04得票数 0
如何为每个选中的复选框创建容器？ like in this image 选中复选框后，将出现一个容器，其中包含其值 new Vue({
el: '#vue-container',
data: {
checkedNames: []
}
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='vue-container'>
<input type=
浏览 28提问于2021-10-13得票数 1
回答已采纳
我有一个身份验证页面，还有一个复选框。我的主要想法是切换表单，我的复选框上写着‘已经有一个帐户’--如果点击它，我想显示注册表单，如果没有选中，我想在表单中显示签名。
我遵循了的例子，这就是我在标签中得到的：
<div id='#selector'>
<div class="container">
<label class="bs-switch">
Already have an account
<input type="checkbox" v-model="c
浏览 0提问于2019-01-05得票数 0
回答已采纳
1回答
Vue中搜索结果的复选框筛选器
、、、、
我正在尝试创建一个具有复选框筛选功能的查询表。您可以简单地运行下面的代码片段来更容易地理解。
当用户勾选复选框时，应相应地筛选下表。
现在，我有以下问题：
默认情况下，如何使所有复选框都被选中？(当用户单击“搜索水果”时，他们最初可以看到所有复选框都被选中，所有的水果都显示出来。)我试图输入checked中的属性，但它不起作用。
如何将选定的复选框与下表绑定以具有筛选器功能？我试着在每个复选框上使用v-on:click，但它似乎不起作用.
下面是简单的代码片段：
new Vue({
el: '#app',
data: {
浏览 6提问于2022-08-20得票数 1
回答已采纳
2回答
我已经尝试/猜测了我能想到的每一个v-bind/v-model/: checked /:value的组合，但我无法在加载时选中这些该死的复选框： 使用Vue材质/ Vue3： <div v-if="items.length">
<div
v-for="(value,key,index) in this.items"
:key="index"
:ref="'icon'+items[key].id">
<
浏览 19提问于2021-04-16得票数 0
我有两个组件，我试图更新组件，并试图根据复选框更改属性值，选中或未选中。我无法更改该属性的值。
这是我的代码：
ComponentA.vue
**Template**
<div class="column" v-for="car in cars">
<label class="label">
<input type="checkbox" v-model="carsSelected" @change="onChange" >
{
浏览 4提问于2021-05-07得票数 1
回答已采纳
是否知道如何解决此问题：
在这个中，作者使用了vue 2.3.2，它工作得很完美，
new Vue({
el: '#app',
data: {
users: [{
"id": "Shad",
"name": "Shad"
},
{
"id": "Duane",
"name": "Duane"
},
{
&#
浏览 1提问于2018-07-19得票数 11
回答已采纳
1回答
vue:计数和复选框
、、、
我想对vue做什么：
计数复选框
将所有复选框设置为选中(或取消选中所有)
这是一个非常简化的模型。真正的网站包含以下违禁品：
复选框的数量会更改。
价值总是不同的。
我不想把所有的输入-属性放入Vue的数据部分。
下面的代码允许计算选中复选框的数量。
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type=
浏览 0提问于2018-10-18得票数 0
回答已采纳
在Vue 3中，基于计算属性的元素在使用localStorage后似乎不会重新呈现。
为了演示这一点，我们将有一个带有两个复选框和文本输入字段的简单表单。当选中这两个复选框时，输入字段应变为只读字段.
<div id="app">
<form>
<label>
Checkbox A
<input type="checkbox" v-model="checkboxA" />
</label>
<label>
Ch
浏览 2提问于2021-01-26得票数 1
回答已采纳
我想知道如果我使用数组作为多个复选框列表的模型，我如何才能有效地检查哪些项被选中，哪些项未被选中，而不是与该数组逐个比较？
<ul>
<li v-for="task in tasks">
<input type="checkbox" :id="task.title" :value="task" v-model="selectedTasks" @change="handleTasks(task)">
<label :for="task.title
浏览 2提问于2018-07-20得票数 5
1回答
我开始学vue js了。
我有一个复选框：
<input type="checkbox" value="users" class="pull-right" v-model="user.permissions">
<input type="checkbox" value="edit user" v-model="user.permissions">
<input type="checkbox" value="add user"
浏览 1提问于2018-08-29得票数 0
回答已采纳
我正在尝试构建一个带有选项的自定义checkbox组件，这些选项是由带有选项和值的数组通过v-for循环生成的。我如何正确地将v-model绑定到checkbox组件，以便正确地更新它？
现在的问题是，模型仅更新为选中的最新复选框，并且不会给出具有所有选中选项的数组。
Vue.component('ui-checkbox', {
props: {
label: {
type: String,
required: true,
},
index: {
type: Number
},
input
浏览 10提问于2019-10-01得票数 3
2回答
我一直在尝试创建一个带有样式复选框和相应标签的简单组件。所有选中复选框的值(字符串)应存储在数组中。这在普通html复选框中运行得很好：
<template>
<div>
<div class="mt-6">
<div>
<input type="checkbox" value="EVO" v-model="status" /> <label for="EVO">EVO</label>
浏览 20提问于2022-11-07得票数 1
我不确定这是否是vuetify的bug，或者我可能对Vue的一些基本知识不了解。我正在尝试使用复选框的:value属性来设置复选框的值。我没有使用v-model，因为我不需要双向绑定。我只想根据我的组件中的一个布尔值来设置它的选中状态。
布尔值是在计算中计算的，但是当值更改时，复选框不会响应。这是一个codepen：
我希望在页面加载时看到复选框被选中，但它不是：
<div id="app">
<v-app id="inspire">
<div>
<v-row justify="spac
浏览 9提问于2020-04-29得票数 1
我有许多复选框如下所示
<input :disabled="update.spinner" v-model="searchRequest.age" :value="age" type="checkbox" :id="age" @click="getFilters(searchRequest)"></input>
我有一个Vue组件
Vue.component('filters',{
template:filtertemplate,
浏览 3提问于2018-05-16得票数 1
回答已采纳
我正在学习如何使用Vue.js，并尝试实现以下目标:基本上有一个“Mark”复选框，在该复选框中，它更新数据属性，此更新将在其他复选框上触发onchange事件。这些复选框启用或禁用它们的链接字段(类似于我正在构建的窗体的打开/关闭)。它们还在属性上添加字段名，该属性将用于指示字段数据是否将在提交时发布。
这是我到目前为止所拥有的一部分。
Vue.component('manual-form', {
template: `
<div class="row">
<div class="col-md-9"&g
浏览 14提问于2017-09-16得票数 0
回答已采纳
我刚开始学习vue.js，我有一个这样的问题，我有多个复选框，其中一些具有相同的值，结果是相同值的复选框同时被选中，这个问题如何解决？ var app = new Vue({
el: '#app',
data: {
checkedNames:[]
}
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="
浏览 61提问于2021-05-02得票数 1
回答已采纳
1回答
我在Vue 2中的代码中遇到了这种奇怪的行为。
我在这里试图实现的是，当我点击其中一个复选框，其他复选框(Es)也被选中。我只希望只选中选中的复选框。是否有办法这样做？
这是我的组件
<div v-for="(item,index) in api[0].choice" :key="index">
<input type="checkbox" @change="detect" v-model="option[index].checked">
浏览 2提问于2021-07-29得票数 2
回答已采纳
1回答
最近，在使用复选框时，我必须通过以下测试代码：
<?php if ( isset( $_POST['myname'] ) ) {
$myvalue = $_POST['myname'];
echo $myvalue; } ?>
<form method="post">
<input type="checkbox" name="myname" />
<input type="submit" name="send" /></form
浏览 1提问于2016-05-09得票数 2
我想知道为什么在Vue中的一系列输入复选框元素中使用v-model时，这些元素中的"checked“属性会变得不可访问。
最近，我尝试将CheckAll功能添加到项目列表中。没有v-model，它就变得微不足道：
<input type="checkbox" v-model="checkAll">
<div class="list">
<input v-for="item in items" :value="item.id" type="checkbox"
浏览 0提问于2019-08-29得票数 0
我正在使用引导-vue包，并有一个复选框如下所示：
<b-form-checkbox v-model="isSelected"switch></b-form-checkbox>
我有数据属性
data(){
isSelected: false
}
我想做的是让用户单击复选框，在更改选中的值之前，通过调用一个方法来执行某种形式的验证。然后，该方法可以防止更改该值。
我该怎么做？
我尝试将方法绑定到@change事件，但是当我试图设置this.isSelected = false时，仍会选中复选框值。
浏览 0提问于2019-07-24得票数 4
回答已采纳
2回答
我只想确定Vue js 2中是否选中了复选框，在jquery中我们有像$('inputtype=checkbox').prop('checked');这样的函数，如果选中或不选中复选框，它将返回true。Vue js中的等价函数是什么？
下面是有代码的场景。请注意，我使用的是拉拉和它的刀片模板。
@foreach ($roles as $role)
<input type="checkbox" v-on:click="samplefunction({{$role->id}})" v-model="role
浏览 2提问于2017-08-08得票数 31
回答已采纳
1回答
在Vue组件中，我有复选框，其中的项数组设置为复选框值：
<div v-for="group in groups">
<input type="checkbox" v-model="selected" :value="group">
<template v-for="item in group">
<input type="checkbox" :value="item" v-model="se
浏览 0提问于2018-04-05得票数 1
回答已采纳
2回答
我正在构建一组v-复选框
<div class="row form-group" v-for="(author, key) in authorData" :key="key">
<v-checkbox
label
:key="author.PmPubsAuthorID"
v-model="author.checked"
浏览 22提问于2019-08-01得票数 1
回答已采纳
3回答
可能重复：
对于输入类型复选框是如何工作的，我有点困惑。
如果我在复选框上设置了一个值，比如1，那么无论复选框是否选中，提交表单时得到的值都是1。
<input type="checkbox" value="1">
因此，查看是否选中复选框的正确方法是使用来自checked的jQuery？或者如何才能正确地做到这一点？
浏览 6提问于2012-11-02得票数 3
回答已采纳
如果选中复选框，我将尝试创建一个表单，其中一个文本输入字段将具有disabled属性。我试过：
new Vue({
el: "#app",
data: {
isChecked: false,
name: null
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<input type="text" v-model="name" :cl
浏览 1提问于2018-10-02得票数 0
回答已采纳
我试图根据一些复选框的值对其进行预检查:如果在另一个数组中找到了userApp.id，我希望在页面创建时选中复选框。这个条件对我来说没什么问题，但我不能预先检查一下复选框.
我使用v模型将userApp.id推到将进入POST体的数组中。我在VueJs文档中看到v模型中和了值和选中的属性。
如果这些复选框在我的另一个数组中，我如何才能将它们选中？我试图在document.getElementById(${userApp.id}).checked = true中使用JS，但它不起作用。
view.vue
<div v-for="userApp in userApps
浏览 4提问于2022-10-05得票数 2
1回答
我想知道是否有任何方法激发自定义函数--一个函数在复选框更改为真值时，另一个函数更改为假值(不使用$watch)。
例如:我的输入封装在根div中。
<div id="root">
<input type="checkbox" v-model="editModeOn">
</div>
和一个带有disableEditMode (未选中的复选框)和enableEditMode (选中的复选框)的vue实例。
new Vue({
el: '#root',
props: {
浏览 2提问于2017-09-25得票数 1
回答已采纳
当我在我的Galaxy S II内置浏览器或Maxthon all复选框上测试我的网站时，它显示为灰色，并且它没有被选中，默认情况下它像灰色一样被选中，但当我真正选中它时，它变成了带有选中标记的绿色。
我是否可以为所有复选框指定一个常规样式，使它们看起来像正常的复选框而不是灰色选中的复选框，我需要清除它，当选中它时，选中的符号会出现在它上面
浏览 1提问于2012-12-24得票数 0
2回答
我有一个复选框列表，我希望当我点击输入第4，所有先前的框被选中，其余未选中。我几乎做到了，但有一个问题，当我回到那些复选框，取消其中一个，它仍然可以，下一个不被检查，但当再次向前和检查从那些未检查的另一个，最近未选中的项目仍然没有检查，没有改变。
这里是演示，我认为GIF将更好地描述我的问题。
演示
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" v-model="c
浏览 1提问于2021-01-02得票数 1
回答已采纳
我有一张带有复选框的表格。当用户将其标记为“选中”时，我会将值添加到vue.js支柱中。
如果用户提交表单，然后按后退按钮，选中的框保持不变，但vue.js变量不再包含选中的值。如果我取消检查并再次手动检查它们，那么它们将再次出现在变量中。
如何将值保存在变量中，或者使复选框不被选中，以便用户知道需要再次检查它们？
HTML
{% for entity in entities %}
<input type="checkbox" v-model="checkedEntities" value='{{ entity.id }}' name=&#
浏览 8提问于2021-05-11得票数 0
下面是组件中的数据
data: function () {
return {
sltAreaStyle: {
paddingTop: "3%",
},
checkedTypes: ["krw", "btc", "usdt"],
};
},
下面是checkedTypes数据的监视功能
watch: {
checkedTypes: {
handler: function (newVal, old
浏览 12提问于2021-12-08得票数 4
回答已采纳
我阅读了，但我找不到任何示例，当单击一个表行时(当它在一个表下时)，bootstrap vue复选框被设置为选中/取消选中。是否有一种方法可以使单击行的结果被选中/取消选中？
data() {
return {
form: {
optional: {} as { [index: string]: boolean },
},
};
},
methods: {
triggerCheckBox(relatedId: string) {
const val = this.form.optional[relatedId];
this.form.o
浏览 0提问于2018-10-16得票数 0
3回答
我有一个vue页面，它从数据库中加载一堆actions。然后使用action (使用v-for )创建一个表，其中包含从v-for获取的一些数据。
这是我的问题:在一个表行中，我需要一个复选框，该复选框被v-model编辑为属性action.weekly。理想情况下，它将是一个布尔值。但是，我的数据库中有许多action条目没有weekly属性。在这些情况下，我需要选中复选框，好像是真的一样。通常，我在这里使用一个计算属性，但您不能将参数传递给计算属性，因此我不知道如何告诉vue应该查看哪个action (我不能像下面使用handleEnableChanged()那样将$event, ndx传
浏览 2提问于2019-12-16得票数 0
回答已采纳
来自MySQL数据库的数据以"1“和"0”的形式表示布尔值true，false.These值以下列方式在vue组件中设置：
data(){
return {
form : {
attribute_1 : "1", //attribute 1 is true
attribute_2 : "0", //attribute 2 is false
attribute_3 : "1", //attribute 3 is true
}
浏览 4提问于2020-03-26得票数 3
回答已采纳
这是一个简单的待办事项列表示例，根据正在完成或未完成的任务，希望选中或不选中复选框。
在取消选中“完整任务”部分下的复选框后，下一个复选框将显示为未选中，即使它仍被选中在“所有任务”部分。
要想轻松地复制，请在“完成任务”部分取消“去商店”。“干净的房间”将出现未检查，即使它仍然签入“所有的任务”，仍然在数据中完成。
我怎么才能解决这个问题？
<html>
<head>
<title>VueJS</title>
</head>
<body>
<div id="root">
&
浏览 1提问于2020-09-16得票数 1
回答已采纳
1回答
我正在尝试取消选中一个复选框，该复选框使用VueJs中的标签进行检查。
演示：
new Vue({
el: '#app',
data: {
checkedNames: [],
checkedName: true
},
methods: {
uncheck: function() {
this.checkedName = !this.checkedName;
}
}
})
li.badge.badge-primary {
cursor: pointer;
margin: 5px;
font-size:
浏览 2提问于2018-04-03得票数 5
回答已采纳
我的复选框绑定到一个模型值，该模型值是一个真实值("test")，但是复选框初始化为“未选中”。
<div id="app">
<input type="checkbox" v-model="checkbox">checkbox
</div>
app = new Vue({
el: "#app",
data: {
checkbox: "test"
}
})
浏览 0提问于2019-01-16得票数 1
回答已采纳
我是Vue js的新手。我正在尝试为API的其余部分做一个动作表单，但我被困在这一点上。 我的操作表单： <div class="form-group">
<label class="required"> Social Media </label>
<b-form-checkbox value="Facebook" v-model="selected"> FaceBook </b-form-checkbox>
<b-form-checkbox v
浏览 54提问于2021-10-27得票数 1
回答已采纳
1回答
我想验证至少一个需要选中该复选框的需求。当我在循环中点击checkbox时，我正在尝试验证。当我选中一个时，第一次单击时输出是invalid return false。当我取消选中时，返回true。但是，当我使用vue-dev tools检查我的大小时，数组数据是有效的。我试着去找那些虫子，但是我没有找到。我不知道为什么我想知道这是为什么？我说错了吗？
new Vue({
el: '#app',
data: {
sizes:[
{id:1,name:'small',ischeck:false,price:0},
浏览 33提问于2018-09-07得票数 0
回答已采纳
3回答
我正在使用VueJS，并且在一系列复选框上实现两个特性时遇到了问题。
首先，我的复选框是动态构建的。
我需要实现一个主“切换”复选框，当单击该复选框时，将检查或取消选中所有其他复选框。
我需要在模型中保留一组检查过的项目。
这个脚本提供了切换复选框，但是没有填充"checkedNames“数组。我尝试过在名称复选框中添加一个v-模型，但这只是检查了所有内容，并且仍然没有填充数组。
new Vue({
el: '#boxes',
data: {
checked: null,
checkedNames: [],
tea
浏览 0提问于2018-02-26得票数 3
回答已采纳
当相应的复选框被选中/取消选中时，我不能将我的v-model值设置为字符串以外的任何值。 https://jsbin.com/haqofus/edit?html,console,output <div id="app">
<div><input type="checkbox" v-model="checkbox" true-value="null" false-value="new Date()" @change="log(checkbox)">chec
浏览 16提问于2019-01-16得票数 1
回答已采纳
2回答
在我的Vue + Vuetify项目中有一组复选框。我想验证一下，至少有一个复选框是使用Vuetify的选中的。
验证无线电组很容易，通过对无线电组应用规则可以很好地工作：
<v-radio-group v-model="radio" required :rules="radioRules" row>
<v-radio label="A" value="a"></v-radio>
<v-radio label="B" value="b">
浏览 0提问于2019-09-02得票数 14
回答已采纳
1回答
我仍然在学习Vue.js，我有一个小问题:我有一个带有一个复选框数组的文件组件，我已经查看了是否使用了多个复选框，但是这里的示例要求我声明：
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
然而，编辑在data()中的<script>标记中的单个文件组件中设置了这个选项，但它只是一次检查/取消选中所有框(但正确地返回true/false )：
<script>
export default {
name: 'PhrasesDetail'
浏览 2提问于2017-10-23得票数 0
回答已采纳
我有一系列带有值绑定到v-model的复选框。
然而，当您来到页面时，我需要一些预先选中的复选框。我不能使用:checked绑定，因为我使用的是v-model，我需要v模型将一个值传递给我的checkedNames数组。
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" PRE-CHECK-THIS-CHECKBOX>
<label for="
浏览 1提问于2018-01-23得票数 0
回答已采纳
我在我的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
在React中，我们可以有这样一个受控的复选框
<input type="checkbox" checked={true} />
这将使复选框始终被选中，甚至用户也会单击它。
但是在Vue中，将true值绑定到checked之后
<input type="checkbox" :checked="true" />
最初会检查它，但是用户仍然可以单击来更改它。
如何在Vue中防止这种行为？
最新情况：
我真正想要实现的是
复选框可以单击以取消选中。
但是不能单击以检查，唯一的方法是通过更改它旁边的<select
浏览 3提问于2022-01-23得票数 1
在我的vue应用程序中，我想过滤一个列表，以便只显示已审核的条目。 我发现，当复选框被选中时，我会得到所有正确的结果，而当复选框未被选中时，我会得到所有的结果都是假的，但我想要的是，当复选框为空时，不会进行过滤，当复选框被选中时，我会得到经过审核的结果。 这是我的尝试， <input type="checkbox" v-model="showUnModerated" /> Show only unmoderated listings</label> 我的过滤器代码， return this.listing.listings.filter
浏览 34提问于2020-06-18得票数 0
2回答
我对Vue Js有点陌生。我正在尝试从Vue组件中获取每个复选框的布尔值，但是当我选中一个复选框时，其他复选框也会被选中，所以我只能检查一个。我试过了，但没有结果。
<v-card>
<v-layout row wrap class="text-xs-center" v-for="ingredient in ingredients" :key="ingredient.id">
<v-layout column>
<v-flex xs6
浏览 5提问于2017-09-05得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
