Как получить буквальное выражение из настраиваемой директивы в Vue.js 2?

Я пытаюсь перенести пользовательскую директиву Vue 1.x на Vue 2.x и нигде не могу найти, как снова получить мои выражения в виде литерала. Скажем, этот пример - моя настраиваемая директива:

<div v-custom="file.txt"></div>

В Vue1

Vue.directive('custom', function () {
  console.log(this.expression)
})

вернет файл "file.txt" в виде строки.

В Vue2

Vue.directive('custom', {
  bind: function (el, binding) {
    console.log(binding.expression)
  }
})

вернусь

[Предупреждение Vue]: свойство или метод «файл» не определены в экземпляре, но на них ссылаются во время рендеринга. Обязательно объявите реактивные свойства данных в параметре данных

а также

[Предупреждение Vue]: Ошибка в функции рендеринга: «TypeError: невозможно прочитать свойство 'txt' of undefined»

Это означает, что мое выражение в Vue2 больше не является строкой, а является переменной. Как мне заставить его вернуть строку сейчас?


vue.js vuejs2
person harrypujols    schedule 10.05.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Просто заключите текст в одинарные кавычки, чтобы сделать его строковым литералом. Однако, как отмечено в вашем комментарии, при попытке доступа к binding.expression он будет включать одинарные кавычки. Вместо этого вы должны использовать свойство binding.value.

Шаблон:

<div id="app">
  <div v-custom="'file.txt'"></div>
</div>

Javascript:

Vue.directive('custom', {
  bind: function (el, binding) {
    console.log(binding.value)
  }
})

new Vue({
    el: '#app'
})

Образец скрипта.

person David L    schedule 10.05.2017
comment
Это делает выражение буквальным, но также добавляет к строке одинарные кавычки. Я надеялся, что есть решение, в котором мне не нужно вычеркивать кавычки, чтобы получить желаемый результат. - person harrypujols; 10.05.2017
comment
Это правильно, поскольку вы буквально запрашиваете выражение привязки. Я обновил свой ответ. Вы можете получить значение прямо из binding.value, который содержит развернутый строковый литерал. - person David L; 10.05.2017
comment
Да, ответ теперь возвращает строку, как в Vue1. Совершенно другой метод. - person harrypujols; 10.05.2017