vue，只有在单击modal中的按钮时才绑定或使用v-model

Question

我在页面加载时在vue模态中预填充数据时遇到问题，因此模态被渲染和隐藏，这意味着创建模态的每一行都已经渲染了一个文本区域和输入，我想在单击按钮时将其传递给函数。

如果单击保存按钮，我如何更改这一点，以便只将文本区域和隐藏输入传递给道具？

@foreach($results as $k => $results)
<tr class="" id="">
<td>
<a id="show-row-modal" @click="showModal = {{$k}}; getDetails('{{$results->contentID}}');">{{$results->number}}</a>
<modal v-if="showModal==={{$k}}" @close="showModal = false">
<h2 slot="header">{{$results->number}}-{{$results->name}}</h2>
<div slot="body">
<textarea style="width:100%; margin: 0 auto;" v-model="resultsContent">{{utf8_encode($results->content)}}</textarea>
<input type="hidden" value='{$results->contentID}' v-model="existingContentID" />
<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: [''],
},

Answer 1

使用v-model意味着对这些输入的任何更改都将立即更新它们所绑定的状态。相反，听起来你想使用refs只在保存点击时检索输入值：

<textarea style="width:100%; margin: 0 auto;" ref="resultsContent">{{utf8_encode($results->content)}}</textarea>
<input type="hidden" value='{$results->contentID}' ref="existingContentID" />

handleSaveClick() {
// Grab the value from each input via this.$refs
console.log(this.$refs.resultsContent.value);
console.log(this.$refs.existingContentID.value);
}