Объедините vue реквизит с V-для - PullRequest
Новая
       4

Объедините vue реквизит с V-для

0 голосов
/ 09 февраля 2020

Вот образец моего дочернего компонента HTML: 

<div v-for="(input, index) in form.inputs" :key="index">
  <div>
    <input :name"input.name" :type="input.type" />
  </div>
</div>

JavaScript (Vue): 

<script>
  export default {
    name: "child",
    props: ['parentForm'],
    data() {
      return {
        form: {
          inputs: [
            {
              name: 'name',
              type: 'text'
          ],
          [...]
        }
      }
    }

И образец root компонента HTML : 

<child :parentsForm="form"></child>

JavaScript (Vue): 

<script>
  import child from "./child";

  export default {
    name: "root",
    components: { child },
    data() {
      return {
        form: {
          data: {
            name: null,
            email: null,
            ...
          }
      }
    }

Вопрос в том, как мне добиться объединения root + v-for?

Пример Я хочу использовать дочерний компонент таким образом 

<input :name"input.name" :type="input.type" v-model="parentForm.data . input.name" />

Так как parentForm.data будет связывать форму: data: {и это будет переменная get из input.name}

Вывод в v-модель должна быть привязана form.data.name или form.data.email к root компоненту

Спасибо

Ответы [ 2 ]

0 голосов
/ 12 февраля 2020

Если я вас правильно понял, вы хотите обновить родительские данные из вашего дочернего компонента. Если да, тогда у вас есть два варианта.

  1. В вашем дочернем компоненте используйте $parent.form.data для привязки.
  2. Или вы можете передать его как prop, назначив его data собственность на ребенка. Свяжите это новое свойство данных со своим ребенком и emit его при каждом изменении. Получите это emit в родительском элементе и обновите родительское свойство соответственно (рекомендуется)
0 голосов
/ 12 февраля 2020

Вы можете использовать его следующим образом: 

<input :name="input.name" :type="input.type" v-model="parentForm.data[input.name]" />

Это свяжет parentForm.data.name для input.name = 'name' с v-model.

...