- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
问题:创建的选定选项复选框未被选中,我希望复选框被选中,而不考虑checked
true/false
注意:我总是想要没有checked
状态的值(value)模型
下图显示了我的问题(请看黄色区域)
这是我尝试过的:
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: [],
options: [
{ language: 'JavaScript', library: 'Vue.js', checked: false },
{ language: 'JavaScript', library: 'Vue-Multiselect', checked: false },
{ language: 'JavaScript', library: 'Vuelidate', checked: false }
]
},
methods: {
customLabel (option) {
return `${option.library} - ${option.language}`
},
onSelect (option) {
console.log("Added");
let index = this.options.findIndex(item => item.library==option.library);
this.options[index].checked = true;
console.log(option.library + " Clicked!! " + option.checked);
},
onRemove (option) {
console.log("Removed");
let index = this.options.findIndex(item => item.library==option.library);
this.options[index].checked = false;
console.log(option.library + " Removed!! " + option.checked);
}
},
created(){
this.value = [{ language: 'JavaScript', library: 'Vue.js',checked:true }];
}
}).$mount('#app')
* {
font-family: 'Lato', 'Avenir', sans-serif;
}
.checkbox-label {
display: block;
}
.test {
position: absolute;
right: 1vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vue-multiselect@2.0.2/dist/vue-multiselect.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-multiselect@2.0.3/dist/vue-multiselect.min.js"></script>
<div id="app">
<multiselect
select-Label=""
selected-Label=""
deselect-Label=""
v-model="value"
:options="options"
:multiple="true"
track-by="library"
:custom-label="customLabel"
:close-on-select="false"
@select=onSelect($event)
@remove=onRemove($event)
>
<span class="checkbox-label" slot="option" slot-scope="scope" @click.self="select(scope.option)">
{{ scope.option.library }}
<input class="test" type="checkbox" v-model="scope.option.checked" @focus.prevent/>
</span>
</multiselect>
<pre>{{ value }}</pre>
</div>
请提前帮助我谢谢!!
最佳答案
要理解您真正想要的东西有点困难,但假设:
v-model
中的 checked
字段(因此添加它只是为了帮助呈现复选框)您根本不需要 checked
属性,因为可以通过针对 v-model
的简单检查轻松替换该值。这样您就可以删除很多不必要的代码。
请参阅下面的示例:
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: [],
options: [{
language: 'JavaScript',
library: 'Vue.js'
},
{
language: 'JavaScript',
library: 'Vue-Multiselect'
},
{
language: 'JavaScript',
library: 'Vuelidate'
}
]
},
methods: {
customLabel(option) {
return `${option.library} - ${option.language}`
},
isSelected(option) {
/* unfortunatelly following line does not work as VueMultiselect for some (strange) reason
fills the v-model array with copies instead of original objects contained in options
*/
// return this.value.includes(option)
return this.value.some((op) => op.library === option.library)
}
},
created() {
this.value.push(this.options[0])
}
}).$mount('#app')
* {
font-family: 'Lato', 'Avenir', sans-serif;
}
.checkbox-label {
display: block;
}
.test {
position: absolute;
right: 1vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vue-multiselect@2.0.2/dist/vue-multiselect.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue-multiselect@2.0.3/dist/vue-multiselect.min.js"></script>
<div id="app">
<multiselect select-Label="" selected-Label="" deselect-Label="" v-model="value" :options="options" :multiple="true" track-by="library" :custom-label="customLabel" :close-on-select="false">
<span class="checkbox-label" slot="option" slot-scope="scope">
{{ scope.option.library }}
<input class="test" type="checkbox" :checked="isSelected(scope.option)" @focus.prevent :key="scope.option.library" />
</span>
</multiselect>
<pre>{{ value }}</pre>
</div>
关于javascript - 如何使用 vue-multiselect 的 v-model 值选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68280166/
我对 mongoosejs 中模型的使用感到有些困惑。 可以通过这些方式使用 mongoose 创建模型 使用 Mongoose var mongoose = require('mongoose');
我正在看 from django.db import models class Publisher(models.Model): name = models.CharField(max_len
我有自己的 html 帮助器扩展,我用这种方式 model.Reason_ID, Register.PurchaseReason) %> 这样声明的。 public static MvcHtmlS
假设模型原本是存储在CPU上的,然后我想把它移到GPU0上,那么我可以这样做: device = torch.device('cuda:0') model = model.to(device) # o
我过去读过一些关于模型的 MVC 建议,指出不应为域和 View 重用相同的模型对象;但我找不到任何人愿意讨论为什么这很糟糕。 我认为创建两个单独的模型 - 一个用于域,一个用于 View - 然后在
我正在使用pytorch构建一个像VGG16这样的简单模型,并且我已经重载了函数forward在我的模型中。 我发现每个人都倾向于使用 model(input)得到输出而不是 model.forwar
tf.keras API 中的 models 是否多余?对于某些情况,即使不使用 models,代码也能正常运行。 keras.models.sequential 和 keras.sequential
当我尝试使用 docker 镜像运行 docker 容器时遇到问题:tensorflow/serving。 我运行命令: docker run --name=tf_serving -it tensor
我有一个模型,我用管道注册了它: register_step = PythonScriptStep(name = "Register Model",
如果 View 需要访问模型中的数据,您是否认为 Controller 应: a)将模型传递给 View b)将模型的数据传递给 View c)都不;这不应该是 Controller 所关心的。让 V
我正在寻找一个可以在模型中定义的字段,该字段本质上是一个列表,因为它将用于存储多个字符串值。显然CharField不能使用。 最佳答案 您正在描述一种多对一的关系。这应该通过一个额外的 Model 进
我最近了解了 Django 中的模型继承。我使用很棒的包 django-model-utils 取得了巨大的成功。我继承自 TimeStampedModel 和 SoftDeletableModel。
我正在使用基于 resnet50 的双输出模型进行项目。一个输出用于回归任务,第二个输出用于分类任务。 我的主要问题是关于模型评估。在训练期间,我在验证集的两个输出上都取得了不错的结果: - 综合损失
我是keras的新手。现在,我将使用我使用 model.fit_generator 训练的模型来预测测试图像组。我可以使用 model.predict 吗?不确定如何使用model.predict_g
在 MVC 应用程序中,我加入了多个表并将其从 Controller 返回到 View,如下所示: | EmployeeID | ControlID | DoorAddress | DoorID |
我在使用 sails-cassandra 连接系统的 Sails 中有一个 Data 模型。数据。 Data.count({...}).exec() 返回 1,但 Data.find({...}).e
我正在使用 PrimeFaces dataTable 开发一个 jsf 页面来显示用户列表。用户存储在 Model.User 类的对象中。
我正在关注https://www.tensorflow.org/tutorials/keras/basic_classification解决 Kaggle 挑战。 但是,我不明白应该将什么样的数据输入
我是这个领域的新手。那么,你们能帮忙如何为 CNN 创建 .config 文件吗? 传递有关如何执行此操作的文档或教程将对我有很大帮助。谢谢大家。 最佳答案 这个问题对我来说没有多大意义,因为 .co
我是“物理系统建模”主题的新手。我阅读了一些基础文献,并在 Modelica 和 Simulink/Simscape 中做了一些教程。我想问你,如果我对以下内容理解正确: 符号操作是将微分代数方程组(
我是一名优秀的程序员,十分优秀!