Блог

Главная - Вопросы по программированию - Vue3: Обновление атрибута объекта в массиве вызывает ошибку «Не удается прочитать свойство ‘el’ неопределенного»

Vue3: Обновление атрибута объекта в массиве вызывает ошибку «Не удается прочитать свойство ‘el’ неопределенного»

#vue.js #vuejs3

Вопрос:

Я пытаюсь обновить ключ объекта в массиве данных vue 3:

Код выглядит примерно так:

 <!-- template area -->

            <template v-if="currentComponent === 'join-select-options-vue'">
                <join-select-options-vue
                    v-on:set-option-change="setOptionChangeEvent"
                    v-bind:options="options"
                    v-bind:next-component="nextComponent"
                    v-bind:previous-component="currentComponent"
                >

                </join-select-options-vue>
            </template>

<!-- stuff -->

// script area

export default {
        data() {
            return {
                options: [
                    { label: "one", selected: false },
                    { label: "two", selected: false }
                ],


      // more stuff


      methods: {
            setOptionChangeEvent: function(updatedOption) {

                const index = this.options.findIndex((option) => {
                    return option.label === "one";
                });

                let optionToUpdate = this.options[index]
                optionToUpdate.selected = true  // <--- error here
      }

Возникшая ошибка заключается в:

 vue.runtime.esm-bundler.js:7184 Uncaught (in promise) TypeError: Cannot read property 'el' of undefined
    at patchBlockChildren (vue.runtime.esm-bundler.js:7184)
    at patchElement (vue.runtime.esm-bundler.js:7159)
    at processElement (vue.runtime.esm-bundler.js:6984)
    at patch (vue.runtime.esm-bundler.js:6901)
    at patchBlockChildren (vue.runtime.esm-bundler.js:7198)
    at processFragment (vue.runtime.esm-bundler.js:7259)
    at patch (vue.runtime.esm-bundler.js:6897)
    at patchUnkeyedChildren (vue.runtime.esm-bundler.js:7625)
    at patchChildren (vue.runtime.esm-bundler.js:7575)
    at processFragment (vue.runtime.esm-bundler.js:7278)

Я делаю это неправильно в API опций? Все примеры, с которыми я сталкиваюсь, относятся к API композиции.

Обновить:

Единственное, что он не выдает ошибку при обновлении, — это пустой массив. Даже если я обновлю его с помощью исходных объектов, он выдаст ту же ошибку.

Комментарии:

1. method: { или methods: { ?

2. Где вы вызываете метод?

3. @Буссаджрабрахим сожалеет об этом. Я исправил это в примере. Это есть methods , хотя и в коде. Просто ошибка копирования/вставки с моей стороны, так как я пытался упростить пример для ЭТОГО

4. @ftrsk Я добавил раздел шаблона в пример. Излучение исходит от другого компонента. Я уже проверил поступающие данные, и они верны. Я думаю, что это что-то с фактической настройкой данных. В Vue 3 есть куча концепций, которые я все еще не понимаю , например ref , toRef , reactive но все они являются композициями. Я не наткнулся ни на что, касающееся API опций 🙁

Ответ №1:

Попробуйте это:

 methods: {
    setOptionChangeEvent(updatedOption) {
        this.options = this.options.map((x) => 
            x.label === "one"
                ? { ...x, selected: true }
                : x
        )
    }
// ...
}

Безопаснее создать новый массив вместо изменения существующего (как это может показаться неэффективным…)

Комментарии:

1. Спасибо за предложение. Однако я получаю ту же ошибку.

Ответ №2:

Проблема была связана с a :key в цикле for, который был объектом. Я смог найти его, потому что многие другие ответы здесь для такого рода сообщений об ошибках закончились исправлением шаблона.

Затем я постепенно удалял шаблоны, пока ошибка не исчезла, наконец, наткнувшись на цикл for.

Метки: