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
  }
}

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

1 个答案: