Vuejs не может использовать loda sh внутри шаблона, но работает с кодом

Question

У меня есть loda sh, импортированный глобально с:

window._ = require('lodash'); // app.js

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

{{_.get(user, 'address.name')}} 

показывает неопределенную ошибку:

Property or method "_" is not defined on the instance but referenced during render

Почему это произошло? Я мог бы провести рефакторинг, создав новую переменную и присвоив значение в коде, и она будет работать, но я хочу использовать ее и непосредственно в шаблоне.

Answer 1

Дополнение к моему комментарию: я обычно не рекомендую использовать сторонние методы util / helper внутри шаблона VueJS. Это, конечно, личный выбор, но гораздо проще позволить VueJS обрабатывать рендеринг напрямую (а также защищает от возможных проблем с реактивностью в будущем). Следовательно, вы можете просто использовать вычисленное свойство (или метод, если вам нужно передать аргументы) для генерации строки, которая вставляется в шаблон.

Пример:

computed: {
  addressName() {
    return _.get(this.user, 'address.name');
  }
}

Затем в своем шаблоне вы можете просто использовать {{ addressName }} для визуализации строки. Если вам требуется больше динамического c использования с большей гибкостью и абстракцией, вы можете вместо этого использовать методы. Например, если ваш путь будет динамическим c, вы можете затем создать метод, который извлекает данные из this.user с предоставленным аргументом path:

methods: {
  userData(path) {
    return _.get(this.user, path);
  }
}

В вашем шаблоне вы можете просто используйте {{ userData('address.name') }}.

Answer 2

Вероятно, потому что рендеринг (то есть вызов свойства "_") выполняется до его создания.

В вашем случае вам может потребоваться установить window._ в обратном вызове жизненного цикла created который вызывается перед рендерингом.

Но я рекомендую установить это в свойстве "data" вашего компонента и даже импортировать и устанавливать только те функции, которые вам нужны.

Например:

import clone from 'lodash/clone'