How to realize the effect of vue selection
merchandise attributes are traversed, double looping, and each attribute is required and only one can be selected. At the end of the submission, both the outer loop id and the inner id have to be submitted. I just started to read vue. I don"t have a clue. Do you have any ideas?
<div class="container">
<div v-for="(x,index) in standards">
<p style="width:100%" :id="x.shopId">{{x.shopStandsName}}
<div class="standards-wrap">
<div class="standards" :id="item.id"
v-for="(item,valueIndex) in x.shopStandsValues"
v-on:click="check(index,valueIndex,item.id)"
v-bind:class="{ check : index === itemIndex}"
>
{{item.shopStandsValue}}
</div>
</div>
</div>
</div>
data() {
return {
url: domain.url,
goodsDetail: this.goodsDetail,
standards: this.standards,
itemIndex:"",
valIndex: ""
};
},
//
methods: {
check (item,valueIndex,id){
this.itemIndex = item
console.log( this.itemIndex)
}
}
you try to see if this is all right, but you haven't tested
<div class="container">
<div v-for="(x,index) in standards">
<p style="width:100%" :id="x.shopId">{{x.shopStandsName}}
<div class="standards-wrap">
<div class="standards" :id="item.id"
v-for="(item,valueIndex) in x.shopStandsValues"
v-on:click="subData[x.shopStandsName] = item.shopStandsValue"
v-bind:class="{ check : subData[x.shopStandsName] === item.shopStandsValue }"
>
{{item.shopStandsValue}}
</div>
</div>
</div>
</div>
data() {
return {
url: domain.url,
goodsDetail: this.goodsDetail,
standards: this.standards,
subData:{},
};
},
friend encounters the same problem, ask
each attribute is bound with a variable, and then submit these variables together with the outer id
you should not do this operation at the front end, but the back end will pass all the sku to you, that is, all the situations will be passed to you, and you will select the corresponding attribute and compare it with this sku. Then pass the id of the corresponding sku to the backend. What the front end needs to do is the uniqueness of non-empty judgment and choice.
Thank you for your answers. The problem has been solved and I have been forgetting to update it. The code is posted below, if you need it, you can refer to it.
:
<template>
<div class="border-bottom">
<h2 class="text-left">{{ChildData.shopStandsName}}</h2>
<div class="itemBox">
<div v-for="item in ChildData.shopStandsValues"
:key="item.id"
:class="itemActive==item.id?'item-selected':'item'"
ref="itemChecked"
:id="item.id"
@click="choose(item,$event)">
{{item.shopStandsValue}}
</div>
</div>
</div>
</template>
<script>
export default {
props: ['ChildData'],
name: 'shop-standards',
data () {
return {
itemActive: ''
}
},
methods: {
choose: function (item, e) {
let vm = this
vm.itemActive = item.id
console.log(item.id)
}
},
mounted () {
}
}
</script>
:
<my-component v-for="(item, index) in formData.standards"
:ChildData="item"
:key="index">
</my-component>
<script>
import Child from './shopStandards'
import { Toast, MessageBox } from 'mint-ui'
export default {
name: 'partner',
data () {
return {
msg: '',
api: 'shop/findShopById',
sendApi: 'shopCar/addShopCar',
parameter: {
id: 11,
userId: 1,
standardIds: '',
shopNumber: 0
},
formData: this.formData,
shopImgPath: '',
standardLength: ''
}
},
components: {
'my-component': Child
},
</script>
