javascript - 如何通过单击Vuetify中轮播上的按钮将属性设置为true
问题描述
我的 Carousel 有一个组件:
<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')最初由父组件设置为 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)
}
}
在父组件中:
<carousel-component @changeValue="onChangeValueHandler" />
methods: {
onChangeValueHandler (attr) {
this[attr] = true
}
}
推荐阅读
- linux - 容器无法访问其他容器端口
- php - 尝试使用explode从字符串中获取逗号之前的最低值
- indexing - 如何以 GPU 友好的方式获取 2D 张量中多个元素的索引?
- javascript - 使用 Typescript 声明了一个类型,但 Javascript 在内部使用了错误的类型
- python - 如果条件为真,则循环其他行
- r - 从具有不同数据结构的列表中返回函数结果。(使用 lapply 或 sapply 功能)
- java - 在 https://repo.maven.apache.org/maven2 中找不到 javax.sql:jdbc-stdext:jar:2.0 失败被缓存在本地仓库中,
- unit-testing - 将功能块 (FB) 从开发项目链接到测试项目 -TwinCAT 3 - Beckhoff
- docker - 如何从容器内部访问互联网网址
- sql-server - Web 配置上的文件名可能不正确,如何解决此异常?