Я хочу передать объект типа myObj = {id: "personal_info", name:"info", required: true, className: "form-control"} либо элементу ввода, текстовой области, либо элементу выбора. Цель состоит в том, чтобы свойства объекта были атрибутами элемента HTML.
Что-то вроде:
<input v-bind="myObj" >
Я бы хотел, чтобы это сгенерировалось:
<input id="personal_info" name="info" required="true" class="form-control">
Я создаю шаблон FormBuilder, чтобы легче было создавать формы. Поэтому моя цель - оптимизировать этот процесс. Я делаю вот что:
<input v-if="element == 'input'"
:id="cssId" :class="className" :type="type">
<textarea v-if="element == 'textarea'"
:id="cssId" :class="className" :rows="rows" :cols="cols">
</textarea>
<select v-if="element == 'select'" :id="cssId" :class="className">
<option v-for="(option, index) in options" :key="index" :value="option.value">
{{ option.text }}
</option>
</select>
Однако есть много атрибутов, которые могут не использоваться. Может быть много свойств, и они могут быть разными (например, элемент ввода может иметь disabled или readonly, текстовое поле может иметь rows и cols).
Поэтому я не могу просто пишите их, потому что, если они не используются, переменная будет неопределенной и выдаст ошибку. Даже если бы я установил значение по умолчанию для всех из них, было бы намного больше работы, потому что я должен был бы написать атрибут один за другим, и это сделало бы беспорядок в моем коде. Это также добавит ненужные атрибуты к элементам.