Блог

У меня есть пользовательский элемент, который требует, чтобы я передавал объект как свойство dom. В Vue 2 это обычно делается следующим образом

 <my-element :foo.prop="{'hello': 'world'}" />
 

Это работает:

 document.getElementsByTagName('my-element')[0].foo
> {hello: "world"}
 

Но если я попытаюсь привязаться к value prop:

 <my-element :value.prop="{'hello': 'world'}" />
 

Это не работает. Vue строит объект.

 document.getElementsByTagName('my-element')[0].value
> "[object Object]"
 

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

https://codepen.io/rhotzq2/pen/MWbOvWo

Vue обрабатывает value как специальный ключ, который, как ожидается, будет только строкой (за исключением <progress> элементов). Поэтому значение привязки автоматически преобразуется в строку, и я не вижу обходного пути для него с обычными привязками.

Однако вы можете создать пользовательскую директиву привязки, которая привязывается value как объект:

 new Vue({
  el: '#app',
  directives: {
    value: {
      inserted(el, binding) {
        el.value = binding.value
      }
    }
  },
})
 

Затем используйте его в своем шаблоне с v-value="{...}" помощью (вместо :value="{...}" ):

 <my-element v-value="{'hello': 'world'}">
 

ДЕМОНСТРАЦИЯ