问题描述
我的问题可能与我面临的问题不符，因此，我将在此处详细说明。
这是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 );
}
}