如何通过单击Vuetify中轮播上的按钮将属性设置为true

Question

我有一个轮播组件：

<template>
   <div class="caro">
    <v-carousel >
     <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
     >
     <div class="title">
      <v-btn color="error" dark large>{{item.title}}</v-btn>
     </div>
    </v-carousel-item>
   </v-carousel>
   <p> Configure the rack in few easy steps. Click on the part you want. 
     to start from</p>
   </div>
</template>

    <script>
  export default {
    props:['showRackSec', 'showSubrackSec', 'showParts', 'showDatabase'],
    data () {
      return {
        items: [
          {
            id: 'rack', src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', title:'Rack Section'
          },
          {
            id: 'subrack', src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' , title: 'Subrack Section'
          },
          {
            id: 'parts', src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' , title: 'Parts Section'
          },
          {
            id: 'admin', src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' , title: 'Admin Section'
          }
        ]
      }
    }

我有另一个组件（父组件）将道具传递给 Carousel.vue。所有这些道具（'showRackSec'、'showSubrackSec'、'showParts'、'showDatabase'）最初都是由父组件设置的。

我想通过单击轮播上的按钮将它们设置为 true。例如，当轮播显示“子架部分”并且我单击按钮时，它应该将“showSubrackSec”设置为true。

最好的方法是什么？

Answer 1

你可以$emit事件给家长

<v-carousel-item
   v-for="(item,i) in items"
   :key="i"
   :src="item.src"
  >
<div class="title">
 <v-btn color="error" dark large @click="onClickHandler(i)">{{item.title}}</v-btn>
</div>
</v-carousel-item>

methods: {
  onClickHandler (index) {
    const attrs = ['showRackSec', 'showSubrackSec', 'showParts', 'showDatabase']
    const attr = attrs[index]
    this.$emit('changeValue', attr)
  }
}

在父组件中：

<carousel-component @changeValue="onChangeValueHandler" />

methods: {
  onChangeValueHandler (attr) {
    this[attr] = true
  }
}