vue選擇效果怎么實(shí)現(xiàn)

商品屬性是遍歷出來的，雙重循環(huán)，每一個(gè)屬性都是必選且只能選擇一項(xiàng)。最后提交的時(shí)候外層循環(huán)id 和內(nèi)層的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: ''
      };
},
 //選擇商品材質(zhì)等
 methods: {
      check (item,valueIndex,id){
        this.itemIndex = item
        
        console.log( this.itemIndex)
      }
}

回答

編輯回答

哎呦喂

你試試這樣可不可以，未測試

<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:{},
      };
},

2017年9月25日 08:08

編輯回答

誮惜顏

你這個(gè)不應(yīng)該前端來做這樣的操作，而是后端要把所有的sku傳給你，也就是所有的情況傳給你，你這邊選擇相應(yīng)的屬性后跟這個(gè)sku做對比，然后把對應(yīng)的這個(gè)sku的id傳給后端就行了。前端要做的是非空判斷和選擇的唯一性。

2017年4月13日 18:10

編輯回答

浪婳

感謝各位的答案，問題已經(jīng)解決了，一直忘記更新。代碼帖在下面了，有需要的可以參考下。

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

2018年9月9日 07:17

編輯回答