vue选择效果怎么实现

Question

商品属性是遍历出来的，双重循环，每一个属性都是必选且只能选择一项。最后提交的时候外层循环id 和内层的id都要提交，刚开始看vue ，毫无头绪啊 ，各位有没有思路哇？

<div class="container">
    <div v-for="(x,index) in standards">
        <p style="width:100%" :id="x.shopId">{{x.shopStandsName}}</p>
      <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)
      }
}

Answer 1

感谢各位的答案，问题已经解决了，一直忘记更新。代码帖在下面了，有需要的可以参考下。

子组件：
<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>

Answer 2

你试试这样可不可以，未测试

<div class="container">
    <div v-for="(x,index) in standards">
        <p style="width:100%" :id="x.shopId">{{x.shopStandsName}}</p>
      <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:{},
      };
},

Answer 3

朋友遇到同样的问题，求问

Answer 4

每个属性绑一个变量 最后提交的时候把这些变量和外层的id一起提交上去

Answer 5

你这个不应该前端来做这样的操作，而是后端要把所有的sku传给你，也就是所有的情况传给你，你这边选择相应的属性后跟这个sku做对比，然后把对应的这个sku的id传给后端就行了。前端要做的是非空判断和选择的唯一性。