vue 里面一个功能的实现，谢谢

Question

想实现的效果是，我先把右边的数据全部加载好了，想点击左边相应的列表，右边显示相应的内容，不属于这个类目的内容不显示，左边对应的数据是id对应右边的bookid，谢谢 现在最主要得问题是怎么获取到bookid的值

左边的数据

右边的数据

===============================================

现在的问题是怎么用把点击左侧菜单获取的相对应的id 传到v-if 里面的问题，

这个是我获取了左侧相对应的id

但是怎么把choseid 传到 v-if 里面（现在1 的位置）

Answer 1

两个方法
先都是，点击的时候存下左边的id，假设为selectId

1. 右侧用计算属性，从原有数组里过滤出item.booktid===selectId的子项，做v-for。
2. 使用v-show或v-if，在v-for里做判断 item.booktid===selectId的显示。

至于你提问的怎么获取booktid。js是怎么获取的，vue就怎么获取。xxx.booktid。

Answer 2

不就是个tab组件的实现吗
你制作一个tab组件，分成两个slot ，一个是tab标签一个是tab内容
你把奶茶们（商品数据）分离出{key:value} key = 类型 value = 商品列表

<template>
    <div>
        <div v-for="item in list" :key="item" @click="choose(item.bootid)"></div>
    </div>
</template>
<script>
export default {
    props: ['list'],
    methods: {
        choose(bookid) {
            // bookid咯
        }
    }
}
</script>

Answer 3

先随便设定一个值a 当你点击左边的时候 获取id 然后设置这个a=id. 然后右边v-show a=id就显示.

或者点击获取数据, 使用数据来渲染...正常的,一般是这样的.