Как исправить ошибку "Не удается прочитать свойство "_wrapper" неопределенного значения" при использовании webpack с Vue?

#vue.js #webpack #axios

Вопрос:

Я использую axios для получения информации из базы данных. Я получаю ответ от сервера в массиве:

ответ

Мои html-теги: HtmlTag

Js-код выглядит следующим образом:

     data() {
        return {
            departments: {
                id: 0,
                name: "name of company",
                nameZod: "name of company dif"
                },
            };
       },
    created() {
        axios
            .get('/SomeController/Departments')
            .then(response => {
                this.departments = response.data;
                console.log(this.departments);
            })
        }

Я получаю сообщение об ошибке: не удается прочитать свойство «_wrapper» неопределенного значения. Это очень странно, потому что я использую аналогичный код в другом модуле, и он работает правильно.

Ответ №1:

Возможно, вы где-то определили вызов функции (@click =something), и вы еще не определили функцию в методах. Это случилось со мной, может быть, это может быть кому-то полезно

1. Именно то, что это было. 🙂

2. Это была именно моя проблема. У меня была опечатка в имени метода внутри формы <form @submit=»methodName»></form>

3. Произошло то же самое, хотя ошибка вообще не информативна!

4. Это было причиной моей ошибки, когда отсутствующая функция вызывалась в компоненте umd

5. Спасибо, это была проблема и в моем случае

Ответ №2:

Эта ошибка возникает, когда в v-on:click OR @click директиве в шаблоне отсутствует функция, на которую она указывает, внутри methods вашего компонента.

Пример:

 
//template
@click="callAgain"
...
methods : {
  //no function called callAgain
}

Ответ №3:

Вы вызываете некоторую функцию в своем компоненте, которая еще не определена в вашем компоненте, пожалуйста, проверьте, определены ли все ваши функции в вашем компоненте.

Например

Вы используете @click=»something», но something() не определен в вашем компоненте.

1. Это действительно один из недостатков работы с vue. На самом деле я едва ли вижу какой-либо смысл в vue, если бы не компонентная стратегия (которая намного лучше предусмотрена в альтернативных фреймворках). Сделайте небольшую незаметную опечатку в назначении события, и вы находитесь в процессе отладки, поскольку исключение и предоставленная трассировка не дают вам много подсказок. Если бы вы использовали обычную парадигму addEventListener, вы бы нажали на исключение и обнаружили именно то место, где проблема в коде.

Ответ №4:

вам просто нужно инициировать свои отделы в виде массива, подобного этому:

     data() {
        return {
            departments: [
                {
                    id: 0,
                    name: "name of company",
                    nameZod: "name of company dif"
                },
            ],
        };
    },

1. @HormanLewis Работает это или нет, вам все равно нужно это сделать, потому что ваш шаблон ожидает, что departments будет массивом

2. Я столкнулся с этим сегодня, потому что я написал @click=»methodname.prevent», где я должен был написать @click.prevent=»methodname».

Ответ №5:

Это случилось и со мной, но по другой причине (Vue Vuetify. К btn должна быть прикреплена функция @click, а не значок, как показано ниже.

    <v-btn fab small>
       <v-icon @click="sendMessage">send</v-icon>
   </v-btn>