Question

我的问题非常愚蠢……我是初学者。因此，我有一个v-for显示了一个元素列表，如果按下该元素列表，则会选择。

<div v-for="(name) in categories" class="item">
    <span @click="categorySelected(name)"
        {{ name }}  
    </span>
</div>

我有一种保存这种状态的方法，

categorySelected (category) {
    this.selectedCategory = category
    this.$emit('category-selected', category)
},

我想在同一<span>中有一个按钮，当按下该按钮时，它具有与上述功能类似的功能，从而使数组中的下一个元素成为 SELECTED ，像这样的东西：

<div @click="nextCategory(name)"> Next </div>

问题是我要将当前项目的（名称）传递给方法，我不确定如何传递下一项的值。有帮助吗？

Answer 1

假设您的标记看起来像这样，则可以使用索引。

<div v-for="(name, index) in categories" class="item">
    <span @click="categorySelected(name)"
        {{ name }}  
    </span>
    <div @click="selectNextCategory(index + 1)"> Next </div>
</div>

您可以按索引查找类别

selectNextCategory(index) {
    this.selectedCategory = this.categories[index]
    this.$emit('category-selected', this.selectedCategory)
}

或重复使用

selectNextCategory(index) {
    this.categorySelected(this.categories[index]);
}

更新

要防止最后一个项目数组超出范围，可以执行以太或以下两项操作：

使用v-if停止显示下一个按钮。 <div v-if="(index + 1) < categories.length" @click="selectNextCategory(index + 1)"> Next </div>

或者阻止选择下一个类别：

selectNextCategory(index) {
    if(index < this.categories.length) {
        this.categorySelected(this.categories[index]);
    }
}

计算列表

您可以使用当前和下一个项目名称创建一个计算列表。

computed: {
   Categories() {
       return this.categories.map((c, index) => {
           var nextIndex = index + 1;
           return {
               current: c,
               next: nextIndex < this.categories.length 
                   ? this.categories[nextIndex]
                   : null
           }
       })
   }
}

现在您可以使用以下列表进行这样的标记：

<div v-for="c in Categories" class="item">
    <span @click="categorySelected(c.current)"
        {{ c.current }}  
    </span>
    <div v-if="c.next" @click="categorySelected(c.next)"> Next </div>
</div>

使用V-for

1 个答案: