Метод vue js, возвращающий неопределенный - PullRequest
Новая
       11

Метод vue js, возвращающий неопределенный

0 голосов
/ 23 октября 2018

У меня есть приложение Vue Js, использующее VueX.В одном из моих компонентов я вызываю метод для усечения некоторого текста.Этот усеченный метод находится в отдельном файле, который используется для небольших вспомогательных функций.И фрагмент текста, который я пытаюсь усечь, извлекается из состояния, которое извлекается из базы данных.

Предположим, что это пользовательский объект в моем состоянии: 

userState: {
   name: "John Doe",
   bio: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum laborum amet, dolores molestiae voluptates ea animi fugit quo repudiandae facilis.",
   age: 35
}

В моемшаблон Я называю био так: 

<p>{{ truncate(userState.bio, 20, "...") }}</p>

В моих компонентных методах у меня есть следующий метод: 

const helpers = require("@/utilities/helpers");
methods: {
  truncate(text, length, ending) {
     return helpers.truncateText(text, length, ending);
  }

}

И метод в моих помощникахФайл: 

export const truncateText = (str, length, ending) => {
   if (length == null) {
      length = 100;
   }
   if (ending == null) {
      ending = '...';
   }
   if (str.length > length) {
      return str.substring(0, length - ending.length) + ending;
   } else {
      return str;
   }
}

И сообщение, которое я получаю: 

TypeError: Cannot read property 'length' of undefined

Но странная часть заключается в том, что усеченный текст отображается в DOM ... даже с ошибкой вконсоль.

Есть идеи, что здесь происходит?

Заранее спасибо !!

РЕДАКТИРОВАТЬ:

Я должен упомянуть, что вызовuser,bio без метода усечения я не получаю никакой ошибки, и био отображается нормально.

1 Ответ

0 голосов
/ 23 октября 2018

Вероятно, что начальное состояние userState.bio равно undefined , и ошибка возникает при первоначальном рендеринге, когда данные не обновляются;Попробуйте добавить еще одну проверку строки в вашем состоянии, чтобы устранить ошибку: 

if (str && str.length > length) {
}
...