#javascript #vue.js
#javascript #vue.js
Вопрос:
У меня есть два вложенных цикла, и я пытаюсь увеличить счетчик во втором цикле, так что, по сути, счетчик не сбрасывается.
теперь: 1 2 3 4 1 2 3 4
хочу: 1 2 3 4 5 7 8
В vanila javascript у меня была бы переменная, но как это делается в Vue land?
Редактировать
Я хочу, чтобы количество было в шаблоне, а не в части javascript.
new Vue({
el: "#app",
data: () => ({
todos: [],
activeIndex: -1
}),
mounted() {
for (let t of ['first', 'second']) {
const listObjects = []
for (let i = 0; i < 10; i ) {
listObjects.push({
url: `/${t}/${t}-${i}`,
name: `${t}-${i}`,
type: t
})
}
this.todos.push({
type: t,
listItems: listObjects
})
}
}
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="todo of todos">
<ul>
<li
v-for="(item, i) of todo.listItems"
:class="{ 'item--is-active': activeIndex === i }">
{{ item.name }}
</li>
</ul>
</template>
</div> Комментарии:
1. Установите ‘i’ равным 0 перед запуском первого цикла for и удалите ‘i = 0’ во втором цикле for.
2. @SudoKid Я ищу, как это сделать в шаблоне, а не в части сценария
3. о каком счетчике в шаблоне вы говорите?
4. @Prashant Второй счетчик продолжать увеличивать вместо сброса
(item, i)
Ответ №1:
new Vue({
el: "#app",
data: () => ({
todos: [],
activeIndex: -1,
counter: 0,
}),
mounted() {
for (let t of ['first', 'second']) {
const listObjects = []
for (let i = 0; i < 10; i ) {
listObjects.push({
url: `/${t}/${t}-${i}`,
name: `${t}-${i}`,
id: this.counter,
type: t
})
}
this.todos.push({
type: t,
listItems: listObjects
})
}
}
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template v-for="todo of todos">
<ul>
<li
v-for="(item, i) of todo.listItems"
:class="{ 'item--is-active': activeIndex === i }">
{{ item.name }} id: {{ item.id }}
</li>
</ul>
</template>
</div> Ответ №2:
Я не знаю Vue, но я думаю, вам нужно что-то вроде:
mounted() {
let i = 0;
for (let t of ['first', 'second']) {
const listObjects = []
for (; i < 10; i ) {
listObjects.push({
url: `/${t}/${t}-${i}`,
name: `${t}-${i}`,
type: t
})
}
this.todos.push({
type: t,
listItems: listObjects
})
}
}
Комментарии:
1. спасибо за ответ и не поймите это неправильно. Если вы читаете мой вопрос, я специально упоминаю, что мне нужно, чтобы это было в шаблоне, это не то, что я ищу.
Ответ №3:
Определите переменную вне обоих циклов и увеличьте ее внутри второго.
Если вы хотите, чтобы переменная была реактивной, объявите переменную в объекте данных
data () {
return {
loopCounter: 0,
todos: []
}
}
Обратите внимание, что я объявил data как метод, возвращающий объект. Таким образом, все экземпляры компонента имеют свой собственный объект данных, а не совместно используемый. В вашем случае экземпляр vue не является проблемой, но в целом вы должны объявлять его как метод, а не как объект.
Редактировать:
Вы могли бы сохранить информацию о каждом элементе списка и распечатать ее оттуда вместо того, чтобы вычислять ее на месте.
Вы могли бы использовать данные для подсчета циклов, которые вы увеличиваете внутри цикла
{{loopCounter }}
Комментарии:
1. Спасибо, что указали на возврат данных, но я получил эту часть, я просто взял шаблон из jsfiddle. Но как мне его увеличить?
2. Я обновил свой вопрос точным сценарием, которым он должен быть. Таким образом, это решение не будет работать.
3. Вы могли бы использовать этот activeIndex === loopCounter или вы могли бы использовать комбинированный индекс между первым циклом и вторым вместо числового activeIndex.
4. вы пробовали это? Я не могу заставить это работать так, как вы описываете. Счетчик запустит t 4001
5. Это похоже на то, что, как я думал, сработает, но счетчик начинается с 4000 (почему?), а также, что более важно: Ошибка: возможно, у вас бесконечный цикл обновления в компонентной функции рендеринга