如何解决如何在vuejs中将值与可重用复选框分开?
我的问题可能与我面临的问题不符,因此,我将在此处详细说明。
这是SeparateTechnology.vue
的代码。我删除了一些使代码更短的方法。
<template>
<div>
<div v-for="mss in ms" :key="mss.name">
<section class="container shadow-Box techno-Box" v-if="mss.name==selected">
<p>Review the software criteria below and ensure that you complete each section</p>
<h4>{{mss.name}}</h4>
<div class="row shadow-Box">
<div class="col-sm-12 col-lg-6">
<p>Select all that apply</p>
<div class="dropdown">
<input
v-model.trim="inputValue"
class="dropdown-input"
type="text"
placeholder="Search for your Solution"
/>
<div class="dropdown-list" v-show="selected">
<div
v-show="itemVisible(item)"
v-for="item in mss.subMenu"
:key="item"
class="dropdown-item"
>
{{ item }}
<button
class="button button-mini button-dark button-rounded itemLabel"
@click="selectSolution(item,mss)"
>
<i class="icon-line-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 rightList">
<div class="dropdown-list" v-show="selected" v-if="mss.selected_solutions!=''">
<div v-for="item in mss.selected_solutions" :key="item" class="dropdown-item">
{{ item }}
<button
class="button button-mini button-dark button-rounded deleteLabel"
@click="deleteSelectedItem(item,mss)"
>
<i class="icon-line-minus"></i>
</button>
</div>
</div>
<div v-else>
<div class="style-msg errormsg">
<div class="sb-msg">
<i class="icon-remove"></i>You have not selected any solutions.
</div>
</div>
</div>
<button
class="button button-mini"
@click="clearUserOptions(mss)"
v-if="mss.selected_solutions.length > 1"
>
<i class="icon-line-cross"></i>Clear all selection
</button>
</div>
<div style="padding:20px;"></div>
</div>
<div class="row">
<div class="col-sm-12 col-md-3 inputTitle">
<h5>Don't see it in the list above:</h5>
</div>
<input
class="col-sm-12 col-md-6"
type="text"
v-model="value"
@keydown.enter="getUserSolution(value,mss)"
placeholder="Enter your solution here.. "
/>
</div>
<div style="padding:20px;"></div>
<div class="row shadow-Box">
<h5
class="col-sm-12"
>Identify how the software solution is Leveraged within your organization</h5>
<div
v-for="item in mss.selected_solutions"
:key="item"
class="clearfix col-sm-12 col-md-6"
style="padding:20px"
>
<span v-if="mss.isDifferent=='campaign'">
<div class="card">
<h5 class="card-header">{{item}}</h5>
<CheckBox
:groups="campaignMangment"
name="campaignMangment"
:value="item"
classprop="col-sm-12"
@clicked-show-detail="clickedShowDetailModal"
/>
{{item}} and {{productSelected}}
</div>
</span>
</div>
</div>
<button class="btn btn-primary" @click="postUserDetails(mss)">Submit</button>
</section>
</div>
</div>
</template>
<script>
import CheckBox from "../../../components/checkBox/CheckBox";
export default {
name: "technology",data() {
return {
usageValue: "",value: "",campainCheckednames: [],checked: "",productSelected: [],checkedValues: "",exists: null,inputValue: "",campaignMangment: [
"Business to Customer (B2C)","Business to Business (B2B)","Customer to Customer (C2C)","Customer to Business (C2B)","E-Government","M-Commerce",],};
},props: ["ms","selected"],//method to show all the solutions that contains the user
methods: {
clickedShowDetailModal: function (campainCheckednames) {
console.log(campainCheckednames);
this.productSelected.push(campainCheckednames);
},},components: {
CheckBox,};
</script>
这是CheckBox.vue
<template>
<div class="row col-mb-0">
<div
:class="classprop + ' checkBox-margin'"
v-for="singleSelector in groups"
:key="singleSelector"
>
<div>
<input
:id="singleSelector+groupId"
:value="singleSelector"
class="checkBox-style"
type="checkBox"
v-model="checkedValues"
@change="showDetailModal"
/>
<label :for="singleSelector +groupId" class="checkBox-style-3-label">{{singleSelector}}</label>
</div>
</div>
</div>
</template>
<script>
let groupId = 0;
export default {
props: {
groups: Array,name: String,classprop: String,value: String,data() {
return {
groupId: groupId++,checkedValues: [],inputs: {},methods: {
showDetailModal: function (e) {
this.$set(this.inputs,this.value,e.target.value);
this.$emit("clicked-show-detail",this.inputs);
},};
</script>
<style scoped>
.checkBox-margin {
margin-bottom: 10px;
}
</style>
现在,第 {{item}} and {{productSelected}}
行打印输出,如下所示,如屏幕截图所示
。
问题:在每次单击/取消选中复选框时,它都会将项目添加到数组中,而不是我想要的格式。并且如果我仅选中左侧的复选框,那么它将在右侧以及上面的屏幕快照中显示该项目。这是由于相同的数组声明,但是我想不出更多了。
预期的输出:对于每个选定的item
,我都希望以以下数组格式打印选定复选框的列表。
"selected_solutions": [{
"name": "Adobe Campaign","usage": [ "Business to Customer",...]
},{
"name": "Marin Software","usage": ["M-Commerce",...]
}]
即使是小的提示或技巧也将不胜感激。我不介意在要点上发布代码。谢谢。
解决方法
对于复选框组件,您想像这样发出“ event.target.checked”:
this.$emit('input',event.target.checked)
这样,它的行为就像一个复选框,您可以在父级上使用v模型:
<CheckBox v-model="item.checked" ...>
我没有在组件内部使用v模型,而是绑定了:checked="value"
,但这可能取决于首选项。但是同时使用:value
和v-model
可能(应该吗?)会引起问题,因为v模型实际上是引擎盖下的:value
+发射器(或者我听说)。
无论如何,这是我最小的可重用复选框包装器:
<template>
<input type="checkbox" :checked="value" @change="handleChange" />
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
name: 'MyCheckbox',props: {
value: { type: Boolean,default: false }
},methods: {
handleChange(event) {
this.$emit('input',event.target.checked)
}
}
})
</script>
完成此操作后,您可以仅过滤选中的项目:
computed: {
checkedSolutions(){
return this.ms[0].selected_solutions
.filter( solution => solution.checked );
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。