Question

我有这张桌子：

 <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>

    });

问题：如何将数据从一行发送到表单？

Answer 1

最初，您的modal是隐藏的，当您单击一个按钮时，它将显示出来，并且数据将通过props自动传递：

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

将数据从表传递到模式形式

1 个答案: