У меня есть компонент Vue, например, ниже:
<div v-for="item in items" :key="there I want get the for-loop index" >
</div>
...
data(){
items: [{name:'a'}, {name:'b'}...]
}
Как я могу получить индекс при выполнении цикла for в моем vue.js?
У меня есть компонент Vue, например, ниже:
<div v-for="item in items" :key="there I want get the for-loop index" >
</div>
...
data(){
items: [{name:'a'}, {name:'b'}...]
}
Как я могу получить индекс при выполнении цикла for в моем vue.js?
Объявите переменную index
:
<div v-for="(item, index) in items" :key="item.name">
</div>
Demo:
new Vue({
el: '#app',
data: {
items: [{name: 'a'}, {name: 'b'}]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="item.name">
{{ index }}: {{ item.name }}
</div>
</div>
Вы можете использовать '$ index' для получения индекса v-for.
<div v-for="item in items" :key="'$index'" >
</div>
и другой метод:
<div v-for="(item, index) in items" :key="index" >
</div>
Создайте метод:
methods: {
roleCount(key) {
return key + 1;
},
},
Если ключи массива нумеруются, начиная с нуля. items [0], items [1] и т.д..
Вы можете использовать ключи массива
<div v-for="(item, key) in items" :key="key">
{{ incementIndex(key) }}
</div>
Но если ключи массива имеют тип String, вы можете сделать
<div v-for="(item, key, index) in items" :key="key">
{{ incementIndex(index) }}
</div>
Вторая версия использует "счетчик" из цикла v-for.
Обновленный ответ ::
Вы проиндексировали массив как: "["aaaa","bbbbb"]"
, а затем этот скрипт.
new Vue({
el: '#app',
data: {
items: ["aaaa","bbbbb"]
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
{{ index }} : {{ item }}
</div>
</div>