Как проинициализировать большое кол-во однотипных свойств?

Question

[Scott]

Есть форма, в ней порядка 20 инпутов.
Как мне их добавить в data, не прописывая 20 раз подряд input1: '', input2: ''?
т.е

new Vue({
	el: '#form',
	data: {
		// как это сократить?
		input1: '',
		input20: ''
	},
	beforeMount() { // какой тут хук использовать?
		const fields = ['input1', 'input2']

		fields.forEach(item => this[item] = '') // я правильно добавляю в this, а не в this.$data?
	}
})

Ну и, естественно, чтобы эти св-ва работали с v-model и к ним можно было обратиться в шаблоне как {{input1}} {{input2}}...

Answer 1

[0xD34F]

beforeMount() { // какой тут хук использовать?
  const fields = ['input1', 'input2']

  fields.forEach(item => this[item] = '') // я правильно добавляю в this, а не в this.$data?
}

Никакой хук не использовать. Всё неправильно.

С одной стороны, разницы нет, куда стучаться, к экземпляру, или к $data, т.к. последний представляет собой

Объект с данными, над которым экземпляр Vue осуществляет наблюдение. Экземпляр проксирует сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)

С другой стороны, пытаться туда что-то добавлять бессмысленно, потому что

Vue не может обнаружить добавление или удаление свойства. Так как Vue добавляет геттер/сеттер на этапе инициализации экземпляра, свойство должно присутствовать в объекте data для того чтобы Vue преобразовал его и сделал реактивным.
<...>
Во Vue нельзя динамически добавлять новые корневые реактивные свойства в уже существующий экземпляр.

Массив сделайте:

data: () => ({
  inputs: Array(20).fill(''),
}),

<div v-for="(n, i) in inputs">
  Значение #{{ i }}:
  <input v-model="inputs[i]">
  {{ n }}
</div>

Comments

[Roman K]

Или объект

[Scott]

Да, тут тогда объект нужен, ведь ключи не индексы массива, а свои.

0xD34F, Я немного переделал ваш ответ:

const inputs = ['name', 'lastname', 'email']

new Vue({
    data: {
        inputs: inputs.reduce((o, key) => Object.assign(o, {[key]: ''}), {})
    }
})

Но у меня от такого кода немного зудит... Такое позволительно во Vue?

[0xD34F]

Позволительно. Можно записать немного покороче:

inputs.reduce((acc, n) => (acc[n] = '', acc), {})

или

Object.fromEntries(inputs.map(n => [ n, '' ]))

Answer 2

[Дмитрий Гололобов]

По этому же принципу, можно создать элементы из заранее известного массива с их именами и использовать тогда объект для хранения моделей

Answer 3

[Денис Грибанов]

Немного не соглашусь с концепцией.

Я бы на вашем месте сделал все 20 свойств, но при этом применял семантичное именование. (ну т.е. не input1, а email). В данном случае вы теряете "экономию на спичках", но ваш код становится более осмысленным и читабельным.

По поводу "очистки" значений, можно как сделать функцию очистки всех полей, так и сделать подобие defaultState для всего списка полей, и просто затирать им рабочие свойства.