Javascript 如何在Vuetify中单击旋转木马上的按钮将属性设置为true

我的转盘有一个组件：

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

{{item.title}
通过几个简单的步骤配置机架。单击所需的零件。
起于

导出默认值{
道具：['showRackSec'，'showSubrackSec'，'showParts'，'showDatabase']，
数据（）{
返回{
项目：[
{
id:'机架'，src:'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg，标题：'Rack Section'
},
{
id:'子架'，src:'https://cdn.vuetifyjs.com/images/carousel/sky.jpg，标题：“子架部分”
},
{
id:'零件'，src:'https://cdn.vuetifyjs.com/images/carousel/bird.jpg，标题：“零件部分”
},
{
id:'管理员'，src:'https://cdn.vuetifyjs.com/images/carousel/bird.jpg，标题：“管理部分”
}
]
}
}

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

我想通过单击旋转木马上的按钮将其设置为true。例如，当旋转木马显示“子架部分”时，我单击按钮，它应将“showSubrackSec”设置为true

---

最好的方法是什么？

您可以

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

{{item.title}
方法：{
onClickHandler（索引）{
const attrs=['showRackSec'，'showSubrackSec'，'showParts'，'showDatabase']
常量属性=属性[索引]
此.$emit（'changeValue'，attr）
}
}

在父组件中：

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

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

方法：{
onChangeValueHandler（属性）{
此[attr]=true
}
}

我还有一个问题，如何将图片从电脑上传到传送带，而不是使用网络上的图片？