I'm facing an issue with pre-filling data in a Vue modal when the page loads. Currently, the modal is rendered and hidden, causing every row that creates a modal to already render a textarea and input that I wish to pass to a function on button click.
Is there a way for me to modify this behavior so that I only pass the textarea and hidden input to the props if the save button is clicked?
@foreach($results as $k => $result)
<tr class="" id="">
<td>
<a id="show-row-modal" @click="showModal = {{$k}}; getDetails('{{$result->contentID}}');">{{$result->number}}</a>
<modal v-if="showModal==={{$k}}" @close="showModal = false">
<h2 slot="header">{{$result->number}}-{{$result->name}}</h2>
<div slot="body">
<textarea style="width:100%; margin: 0 auto;" v-model="resultsContent">{{utf8_encode($result->content)}}</textarea>
<input type="hidden" value='{$result->contentID}' v-model="existingCopyID" />
<button>save</button>
</div>
</td>
</tr>
@endforeach
<script type="text/x-template" id="row-modal-template">
<transition name="rowModal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="uk-grid">
<div class="modal-header uk-form-row uk-width-1-1">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body uk-form-row uk-width-1-1">
<slot name="body">
default body
</slot>
</div>
</div>
</div>
</div>
</div>
</transition>
</script>
Vue.component('modal',{
template: '#row-modal-template'
})
new Vue({
el:'#app',
data: {
showModal: false,
existingCopyID: [''],
resultsContent: [''],
},