Передать данные в директиву? - PullRequest
Новая
       42

Передать данные в директиву?

0 голосов
/ 24 апреля 2018

В документах говорится, что вы можете передавать различные аргументы директиве.

Поэтому я хочу передать значение: 

v-my-directive="test"

Но яполучить ошибку: 

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

Как передать строку в директиву?

Ответы [ 2 ]

0 голосов
/ 24 апреля 2018

Вы должны заключить строку в кавычки, иначе она будет искать переменную test в контексте вашего компонента (props или data): 

v-my-directive="'test'"

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

Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

См. Главу Пользовательские директивы .

0 голосов
/ 24 апреля 2018

Значение является регулярным выражением JavaScript.Таким образом, если вы хотите передать строку, скажем 'test', используйте: 

v-my-directive="'test'"

Демо: 

Vue.directive('my-directive', function (el, binding) {
  console.log('directive expression:', binding.value)  // => "test"
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <div v-my-directive="'test'"></div>
</div>
...