Передать данные в модальную форму из таблицы - PullRequest
Новая
       12

Передать данные в модальную форму из таблицы

0 голосов
/ 13 октября 2018

У меня есть эта таблица: 

 <tr v-for="row in tasks">
   <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">   {{row.text}}<button v-if="showBatton" @click="editWindow(row.text)">Edit</button></td>
   <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.date_current}}</td>
 </tr>

Функция для обработки события нажатия: 

 editWindow:function(text){
                    console.log('edit')
                    this.showModal=true;
                    this.textToFunction=text
                }

При нажатии я получаю модальную форму: 

 Vue.component('modal', {
        props: ['text'],
        template: `
    <div class="modal is-active">
      <div class="modal-background"></div>
      <div class="modal-content">
        <div class="box">

                <input type="text" value={{text}} v-on:change="checInput(text)"  name="text" >
            <button  class="btn btn-default">Save</button>
              <button  class="btn btn-default" @click="$emit('close')">Cancel</button>
      </div>
      <button class="modal-close" @click="$emit('close')"></button>
    </div>

    });

Вопрос: Как я могу отправить данные из строки в форму?

1 Ответ

0 голосов
/ 13 октября 2018

Изначально ваш modal скрыт, и при нажатии на кнопку он будет показан, и данные будут автоматически переданы через props: 

   <tr v-for="row in tasks">
       ....
   </tr>
    ....
   <modal :text="textToFunction" v-if="showModal"/>
...