Question

我正在使用VueJS框架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>

Answer 1

为了在click处理程序中构造新的sliderRadio值，您需要使用字符串连接，如下所示：

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

我无法在v-for

1 个答案: