Динамически добавлять произвольные атрибуты в элемент компонента Vue? - PullRequest
Новая
       6

Динамически добавлять произвольные атрибуты в элемент компонента Vue?

0 голосов
/ 12 июня 2018

Я хочу создать компонент, который может иметь произвольные атрибуты (например, data-xxx), КОТОРЫЙ КОМПОНЕНТ НЕ ОЖИДАЕТ / ЗНАЕТ О, из Vue.data во время выполнения.Например, это не работает, но концептуально: 

Vue.component('text-input',{
  template: `<input type="text" v-model="value" :name="name" {{extra_atts}}>`,
  props:['value','name','extra_atts']
});

.....
//Used elsewhere in Vue app:

<text-input :value="avalue" :name="aname" :extra_atts="dynamic_atts"> </text-input>

const vm = new Vue({
  data: {
    aname: "username",
    avalue: "johnny",
    dynamic_atts: "placeholder='Your name' title='Required' data-extrainfo='arbitrary data'",
  }...

, поэтому оно будет отображаться как: 

<input type='text' value='johnny' name='username' placeholder='Your name' title='Required' data-extrainfo='arbitrary data' />

Есть ли способ сделать это в Vue?

Спасибо,

Крис

1 Ответ

0 голосов
/ 12 июня 2018

Просто установите inheritAttrs на false.Затем используйте $attrs для привязки атрибутов к элементу ввода 

Vue.component('text-input',{
  inheritAttrs: false,
  template: `<input type="text" v-model="value" :name="name" v-bind="$attrs">`,
  props:['value','name']
});

Теперь просто добавьте атрибуты компонента, как если бы вы делали это для обычного ввода 

<text-input :value="avalue" :name="aname" placeholder='Your name' title='Required' data-extrainfo='arbitrary data'> </text-input>
...