Eu tenho esta mesa:
<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>
Função para lidar com evento de clique:
editWindow:function(text){
console.log('edit')
this.showModal=true;
this.textToFunction=text
}
Ao clicar, obtenho o formulário modal:
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>
});
Pergunta: Como posso enviar dados de uma linha para um formulário?
Inicialmente o seu modal
está oculto e ao clicar em um botão ele será mostrado e os dados serão repassados automaticamente via props
:
<tr v-for="row in tasks">
....
</tr>
....
<modal :text="textToFunction" v-if="showModal"/>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras