studytour-front/pages_order/order/orderConfirm/memberChooseView.vue

<template>
  <view :style="style">
    <view class="card" v-for="item in list" :key="item.id">
      <memberCard 
        :data="item" 
        @selectChange="onSelectChange(item.id, $event)"
      ></memberCard>
    </view>
  </view>
</template>

<script>
  import memberCard from './memberCard.vue'

  export default {
    components: {
      memberCard,
    },
    props: {
      members: {
        type: Array,
        default() {
          return []
        },
      },
      style: {
        type: String,
        default: ''
      },
    },
    computed: {
      list: {
        set(val) {
          this.$emit('update:list', val)
        },
        get() {
          return this.members
        }
      },
    },
    methods: {
      onSelectChange(id, val) {

        let list = [...this.list]

        const target = list.find(item => item.id === id)

        target.isSelected = val

        this.list = list
      },
    },
  }
</script>

<style scoped lang="scss">
  .card {
    margin-top: 16rpx;
  }
</style>