VueJs Отправить данные модальному компоненту - PullRequest
Новая
       8

VueJs Отправить данные модальному компоненту

0 голосов
/ 06 июня 2018

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

Вот мой код:

form.vue: 

  <template>
     <tbody v-for="user,index in users">
        <button type="button" class="btn btn-xs" data-toggle="modal" 
         data-target="#editModal"> -> edit button, show modal
     (...)
     <edit-user></edit-user>
    (...)
  </template>

<script>
      components: {
            add: addUser,
            edit: editUser
        },
</script>

edit.vue: 

  <template>
    <div id="editModal" class="modal fade" role="dialog">

     <div class="form-group">
        <input type="text" class="form-control" name="nameInput" 
value=" I WANT HERE DATA" v-model="list.name">
                            </div>
(...)
    </template>

Как я могу это сделать?

1 Ответ

0 голосов
/ 06 июня 2018

Решение будет иметь родительский компонент для хранения данных, которые совместно используются обоими компонентами.
В первом компоненте вы можете использовать $emit, чтобы изменить эти данные родительского и затем передать ихте же данные для модального компонента, используя props.

Vue.component('app-input', {
  props: ['message'],
  template: `<input type="text" placeholder="Try me" 
  v-bind:value="message"
  v-on:input="$emit('input', $event.target.value)"/>`
});

Vue.component('app-header', {
  props: ['title'],
  template: `<h4>{{title}}</h4>`
});

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <app-header v-bind:title="message"></app-header>
  <app-input v-model="message"></app-input>
</div>

Выше приведен простой пример того, как это можно сделать.
Компонент <app-input> меняет родительский элемент message data, иэто же свойство передается компоненту <app-header> в качестве заголовка.

...