vue.jsの@clickにおけるメソッド名の出力が上手く処理できない

Question

前提・実現したいこと

buttonの@click=currentComponetの引数を動的に変更したい

 　　　　　　　　　<li>
                  　<button class="list-name" v-scroll-to="'#bar-chart'" @click="currentComponent = 'food'">ご飯</button>
                </li>
                <li>
                   <button class="list-name" v-scroll-to="'#bar-chart'" @click="currentComponent = 'weight'">体重</button>
                </li>
                <li>
                   <button class="list-name" v-scroll-to="'#bar-chart'" @click="currentComponent = 'toilet'">トイレの回数</button>
                </li>
                <li>
　　　　　　　　　　　 <button class="list-name" v-scroll-to="'#bar-chart'" @click="currentComponent = 'brushing'">ブラッシング</button>
                </li> 

のコードをv-forで以下のように修正をいたしました。

                <li v-for="item in items" :key="item.id">
                    <button class="list-name" v-scroll-to="'#bar-chart'" @click="currentComponent = 'food'">{{item.name}}</button>
                </li>
<script>
export default {
    components:{
        Food,
        Weight,
        Toilet,
        Brushing
    },
    data(){
        return{
            items:[
                { name:'ご飯' },
                { name:'体重'},
                { name:'トイレの回数'},
                { name:'ブラッシング'}
            ],
            currentComponent: "food",
        };
    }
}
</script>

躓いてしまっている点

上記のコードではcurrentComponentがfoodになっており
foodのweightやtoiletに

Vue初学者でコードが汚かったり、質問の仕方に難があると思いますが
お時間のある方でよろしければご助言頂けると幸いです。

Answer 1

各配列にコンポーネントの名前を入れて、その名前を [currentComponent] に代入する感じじゃダメでしょうか？

<li v-for="item in items" :key="item.id">
　<button class="list-name" v-scroll-to="'#bar-chart'" @click="currentComponent = item.componentName">{{item.name}}</button>
</li>

items:[
　{ name:'ご飯',　componentName:'food'},
　{ name:'体重',　componentName:'weight'},
　{ name:'トイレの回数',　componentName:'toilet'},
　{ name:'ブラッシング',　componentName:'brushing'}
],

Comments

[lily12]

ご回答頂きありがとうございます！
無事に実現することができました。
とても勉強になりました！

ご回答いただいたやり方を元にv-forでの画像の出力もすることができました！
お忙しい中誠に有り難うございました！