2017-10-13 5 views
2

私はVueJSフレームワークv-forを使用しています。私はループする必要がある項目のリストを持っていました。各項目インデックスは、割り当てられる変数を表します。 v-for要素内の要素には、v-bindクリックが付加されていませんでした。私は計算されたプロパティを使用しましたが、運はありませんでした。私はv-bind内でv-forを使用することはできません

HTML

<a v-for="(ind,s) in sliderItems" id="con-radio{{ind+1}}" 
    href="#" @click="sliderRadio = 'con-radio$ind+1'" 
    style="width: 100%;height: 100%;"> 
    <figure class="sf{{ind+1}}"></figure> 
</a> 

JS

new Vue({ 
    el: "#app", 
    data: { 
    sliderRadio: 'con-radio2', //initial 
    sliderData: sliderData 

    }, 
    methods:{ 

    }, 
    computed: { 
    sliderItems: function() { 
     return this.sliderData; 
    } 
    } 
}) 

出力

<a href="#" style="width: 100%;height: 100%;" id="con-radio1"> 
    <figure class="sf1"></figure> 
</a> 
<a href="#" style="width: 100%;height: 100%;" id="con-radio2"> 
    <figure class="sf2"></figure> 
</a> 

答えて

3

新しいを構築するために、クリックハンドラの値には、次のような文字列連結を使用する必要があります。

@click="sliderRadio = 'con-radio' + (ind + 1)" 
関連する問題