vue，如果单击模态中的按钮，则仅绑定或使用 v-model

Question

I'm having a problem with pre-populating data in a vue-modal on page load, so the modal is rendered and hidden meaning that every row creating a modal already renders a textarea and input that I want to pass to a function on button click.

How can I change this so that I only pass the textarea and hidden input to the props if the save button is clicked?

 @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

Using v-model means any change to those inputs will immediately update the piece of state they are bound to. Instead, sounds like you want to use refs to only retrieve the input values on save click:

<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);
}