2017-10-13 56 views
2

我正在使用VueJS框架v-for。我有需要循环的项目清单。每个项目索引将代表一个要分配给的变量。 v-bind点击未附加到v-for元素内的元素上。我曾经使用计算过的财产,但没有运气。我不能使用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

为了构建新sliderRadio值单击处理程序中,您需要使用像这样的字符串连接:

@click="sliderRadio = 'con-radio' + (ind + 1)"