<template> <ul> <li v-for="(tab, index) in templateSelectTab.tabs" :key="index" @click="tabClick(tab.templateCategory)" > <span> {{ tab.name }} </span> </li> </ul> </template> <script lang="ts"> //省略 @Component([]) export default class Test extends Vue { @Prop({ type: Object, required: true }) private tabClick (templateCategory: Cateogry) { this.Picked = templateCategory } }
もともとこういう構成のコードがありまして、うまく表示されているのですが、
(liタグが4つ生成される感じです)
こちらにクリックしたときにその行番号のクラス名をつけたかったので下記のようにしたのですが
うまくいきませんでした。。何が間違ってますでしょうか?
<template> <ul> <li :class="is_selected" v-for="(tab, index) in templateSelectTab.tabs" :key="index" :data="index" @click="tabClick(tab.templateCategory, index)" > <span> {{ tab.name }} </span> </li> </ul> </template> <script lang="ts"> //省略 @Component([]) export default class Test extends Vue { @Prop({ type: Object, required: true }) private tabClick (templateCategory: Cateogry, index: number) { this.Picked = templateCategory this.is_selected = index } }
- :data="index" の部分で、ちゃんとindex番号が取れてるか確認したのですが、ちゃんと
出力したソースにはdata="1"と連番が触れてるのでindexには番号が来ているのですが、
どうやら:
private tabClick (templateCategory: Cateogry, index: number) {
ここでうまく受け取れてない感じがします・・・
this.is_selected = index
ためしにここに"test"と静的な文言を挿入するとclickしたときにちゃんとclass名に
class="test"と挿入されます。
アドバイスお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。