Установить значение v-модели в слоте в Vuejs - PullRequest
0 голосов
/ 03 июля 2018

У меня есть два компонента

ребенок-component.vue

<template>
    <div class="container">
        <slot>
    </div>
</template>

родитель-component.vue

<template>
    <my-component>
        <input type="text" v-model="myinput1">
        <input type="text" v-model="myinput2">
        <input type="text" v-model="myinput3">
    </my-component>
</template>
<script>
    export default {
        data() {
            return {
                myinput1: '',
                myinput2: '',
                myinput3: '',
            }
        }   
     }
</script>

Мне нужно установить значения каждого поля ввода внутри слота непосредственно из дочернего компонента (количество полей ввода может измениться).

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

Спасибо

1 Ответ

0 голосов
/ 03 июля 2018

РЕДАКТИРОВАТЬ - изменил код для обработки переменного количества входов

В дочернем компоненте

<template>
    <div class="container">
        <slot :data="slotData" />
    </div>
</template>

<script>
  export default
  {
    data()
    {
      return {
        slotData: ['1', '2', '3']
      };
    }
  }
</script>

В родительском компоненте

<template>
    <my-component>
      <template slot-scope="props">
        <input v-for="item in props.data" type="text" v-model="item">
      </template>
    </my-component>
</template>
...