Цикл входных атрибутов?

Question

У меня есть вход внутри компонента и я хочу передать произвольное количество атрибутов в зависимости от ситуации, в которой он используется:

<input type="text" data-a="a" data-b="b" data-c="c">

У меня есть реквизит с атрибутами, но как я могузациклить их для создания атрибутов на входе?

Answer 1

Вы можете использовать функцию рендеринга vuejs, например

Vue.component('child', {
  data() {
    return {
      attrs: {
        'data-a': 'a',
        'data-b': 'b',
        'data-c': 'c'
      }
    }
  },
  render(h) {
    return h('input', {
      attrs: {
        ...this.attrs
      }
    })
  }
});

Answer 2

Это то, как вы можете установить атрибуты динамически. Скрипка

Шаблон =>

<div id="app">
  <p class="text" v-bind="options">{{ message }}</p>
</div>

Скрипт =>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    propName: 'hello'
  },
  computed: {
    options() {
      return {
        [`data-${this.propName}`]: this.message
      }
    }
  }
})

Answer 3

Вы можете установить атрибуты элемента, используя директиву v-bind, которой можно передать объект, где каждый ключ является атрибутом, а значение - значением для атрибута.

Вы говорите, что передаетеатрибуты, которые вы хотели бы связать в качестве опоры.Я собираюсь предположить вашу структуру данных, поскольку вы не указали (если это не ваша структура данных, вам необходимо создать вычисляемое свойство для форматирования данных таким образом):

{ 'data-a': 'a', 'data-b': 'b', 'data-c': 'c' }

А затем, предполагая, что имя вашей опоры attrs, вы просто добавили бы атрибуты к входу, используя v-bind, например, так:

<input type="text" v-bind="attrs">

---

Вот пример:

Vue.component('child', {
  template: `<input type="text" v-bind="attrs">`,
  props: {
    attrs: { Object, default: () => ({}) }
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      myAttrs: {
        'data-a': 'a',
        'data-b': 'b',
        'data-c': 'c',
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child :attrs="myAttrs"></child>
</div>

Answer 4

Элемент имеет свойство dataset.Вы можете повторить это с Object.keys.А если вы хотите перебрать все атрибуты элемента, используйте метод getAttributeNames().

var el = document.getElementsByTagName('input')[0]

// data-* attributes
Object.keys(el.dataset).forEach(key => {
  console.log('data-' + key, el.dataset[key])
})

// all attributes
el.getAttributeNames().forEach(name => {
  console.log(name, el.getAttribute(name))
})

<input type="text" data-a="a" data-b="b" data-c="c">