Javascript vue，仅在单击模式中的按钮时绑定或使用v-model

我在页面加载时在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: [''],
        },

@foreach（$results作为$k=>$results）
{{$results->number}
{{$results->number}-{{$results->name}
{{utf8_encode（$results->content）}
拯救
@endforeach
默认标题
默认主体
Vue.组件（'模态'{
模板：“#行模式模板”
})
新Vue({
el:“#应用程序”，
数据：{
showModal：错，
现有COPYID:['']，
结果内容：['']，
},

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

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