Не определено при получении элемента массива по индексу, записанному в переменной в Vue.JS

Question

Не определено при получении элемента массива по индексу, записанному в переменной в Vue.JS

1

Мне кажется, что я нашел какую-то ошибку. В основном я хочу получить компонент компонентов по индексу (для тега). Но у меня возникла странная проблема. Я включил необходимые части моего кода ниже:

Рабочий пример:

let steps = ['Handler', 'Categories', 'Finalize'];
export default {
    components: {
        Handler,
        Categories,
        Finalize
    },

    data() {
        return {
            step: 0,
            currentStep: steps[0] // When specifying index without a variable 
        }
    },

}

Разбитый пример:

let steps = ['Handler', 'Categories', 'Finalize'];
export default {
    components: {
        Handler,
        Categories,
        Finalize
    },

    data() {
        return {
            step: 0,
            currentStep: steps[this.step] // When specifying index by a variable 
        }
    },
}

В рабочем примере я получаю компонент (как и ожидалось), но в ломаном я получаю currentStep: undefined в Vue DevTools. Однако ошибок в консоли нет. Что я делаю неправильно?

Nod 11 янв. 2019, в 11:12

Источник

0

Вы проверили, с чем this связано в вашем определении data ? С console.log(this) ?
Mortz 11 янв. 2019, в 10:08
0

Я только что выбросил this на консоль. Что я должен искать?
Andrew G. 11 янв. 2019, в 10:10
0

this должно связываться с Vue и не быть undefined
Mortz 11 янв. 2019, в 10:12
0

Cannot read property 'undefined' of undefined
Andrew G. 11 янв. 2019, в 10:14
0

Если вы хотите использовать this.step создайте переменную в data() , а затем используйте ее для возврата. На данный момент в data() нет атрибута с именем step . Следовательно, не могу this.step сделать. this.step
Satish Kumar 11 янв. 2019, в 10:17

Показать ещё 3 комментария

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Вы проверили, с чем this связано в вашем определении data ? С console.log(this) ?
Я только что выбросил this на консоль. Что я должен искать?
this должно связываться с Vue и не быть undefined
Если вы хотите использовать this.step создайте переменную в data() , а затем используйте ее для возврата. На данный момент в data() нет атрибута с именем step . Следовательно, не могу this.step сделать. this.step

Sergeon · Accepted Answer · 2019-01-11T09-15-00.000Z

Лучше всего переместить currentStep в вычисляемое свойство. Кроме того, steps должны существовать в data чтобы они были реактивными:

let steps = ['Handler', 'Categories', 'Finalize'];
export default {
    components: {
        Handler,
        Categories,
        Finalize
    },

    data() {
        return {
            step: 0,
            steps,
        }
    },
    computed: {
      currentStep() {
        return this.steps[this.step];
      }
    }
}

Если возможно, предпочитайте вставлять steps непосредственно в данные:

data() {
    return {
        step: 0,
        steps: ['Handler', 'Categories', 'Finalize'];,
    }
},

(Но это может быть невозможно, если вы импортируете их извне. Я не знаю о вашем конкретном случае использования).

В общем, в Vue, когда что-то напрямую зависит от значения некоторых свойств компонента, вычисляемые свойства являются подходящим способом: они производительны и понятны.

В исходном коде, если бы он работал, currentStep не реагировал бы на изменение step. Используя вычисленное свойство, вместо этого, при каждом обновлении step currentStep обновляется соответствующим образом.

5 секунд назад удалось исправить это само по себе так же, как вы сделали; D Ну, спасибо за ответ!