鍍金池/ 問(wèn)答/HTML/ vue 里面一個(gè)功能的實(shí)現(xiàn)，謝謝

vue 里面一個(gè)功能的實(shí)現(xiàn)，謝謝

想實(shí)現(xiàn)的效果是，我先把右邊的數(shù)據(jù)全部加載好了，想點(diǎn)擊左邊相應(yīng)的列表，右邊顯示相應(yīng)的內(nèi)容，不屬于這個(gè)類目的內(nèi)容不顯示，左邊對(duì)應(yīng)的數(shù)據(jù)是id對(duì)應(yīng)右邊的bookid，謝謝 現(xiàn)在最主要得問(wèn)題是怎么獲取到bookid的值
clipboard.png
左邊的數(shù)據(jù)
clipboard.png
右邊的數(shù)據(jù)

clipboard.png

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

現(xiàn)在的問(wèn)題是怎么用把點(diǎn)擊左側(cè)菜單獲取的相對(duì)應(yīng)的id 傳到v-if 里面的問(wèn)題，

這個(gè)是我獲取了左側(cè)相對(duì)應(yīng)的id

clipboard.png
但是怎么把choseid 傳到 v-if 里面（現(xiàn)在1 的位置）

clipboard.png

回答
編輯回答
雨萌萌

不就是個(gè)tab組件的實(shí)現(xiàn)嗎
你制作一個(gè)tab組件，分成兩個(gè)slot ，一個(gè)是tab標(biāo)簽一個(gè)是tab內(nèi)容
你把奶茶們（商品數(shù)據(jù)）分離出{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>
2018年6月6日 13:44
編輯回答
舊言

兩個(gè)方法
先都是，點(diǎn)擊的時(shí)候存下左邊的id，假設(shè)為selectId

  1. 右側(cè)用計(jì)算屬性，從原有數(shù)組里過(guò)濾出item.booktid===selectId的子項(xiàng)，做v-for。
  2. 使用v-show或v-if，在v-for里做判斷 item.booktid===selectId的顯示。

至于你提問(wèn)的怎么獲取booktid。js是怎么獲取的，vue就怎么獲取。xxx.booktid。

2018年4月25日 16:55
編輯回答
只愛(ài)你

先隨便設(shè)定一個(gè)值a 當(dāng)你點(diǎn)擊左邊的時(shí)候 獲取id 然后設(shè)置這個(gè)a=id. 然后右邊v-show a=id就顯示.

或者點(diǎn)擊獲取數(shù)據(jù), 使用數(shù)據(jù)來(lái)渲染...正常的,一般是這樣的.

2018年2月1日 14:29