0

我在页面加载时在 vue-modal 中预填充数据时遇到问题，因此模式被渲染并隐藏，这意味着创建模式的每一行都已经渲染了我想传递给按钮上的函数的 textarea 和输入点击。

如何更改此设置，以便仅在单击保存按钮时将 textarea 和隐藏输入传递给道具？

 @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: [''],
        },
4

1 回答 1

2

使用 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);
}
于 2019-11-15T20:05:22.723 回答