CODEWITHSUNDEEP
javascriptvue.js
Geoff_S
Geoff_S

Reputation: 5107

vue, only bind or use v-model if button in modal is clicked

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

Upvotes: 0

Views: 1948

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16441

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

Upvotes: 2

Related Questions