Vue在模态渲染模板中调用function

Question

I have a modal that pops up with checkboxes that seem to succesfully be adding the value to my two data props when checked. However, upon submitting I get an error on the called function.

I think this is becuase the button calling the function is in a rendered modal template and it doesn't see global function.

How can I fix this so that hitting 'Save' will properly call saveDetails so that I can gather my form info to send via axios?

new Vue({
el:'#app',
data: { 

    typeNames: [],
    siteNames: []
},
methods: {

    saveDetails: function(event){
        console.log(this.siteNames);
        console.log(this.typeNames); 
    }
}


<script type="text/x-template" id="add-modal-template">
  <transition name="addModal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
        <div class="uk-grid">

          <div class="modal_context uk-form-row uk-width-1-2">
            <slot name="site">
                <input type="checkbox" name='customeradded' value='customer'  v-modal="siteNames" data-md-icheck  />
                <label>Customer</label><br>
                <input type="checkbox" name='InternalSiteadded' value='InternalSite' v-modal="siteNames" data-md-icheck  />
                <label>InternalSite</label><br>
                <input type="checkbox" name='mixadded' value='mix' v-modal="siteNames" data-md-icheck  />
                <label>mix</label><br>
            </slot>
          </div>

          <div class="modal_type uk-form-row uk-width-1-2">
            <slot name="type">
                <input type="checkbox" name='marketingadded' value='marketing' v-modal="typeNames" data-md-icheck  />
                <label>marketing</label><br>
                <input type="checkbox" name='catalogadded' value='catalog' v-modal="typeNames" data-md-icheck  />
                <label>catalog</label><br>
            </slot>
          </div>

          <div class="modal-footer uk-form-row uk-width-1-1">
            <slot name="footer">
              <button class="modal-default-button" @click="$emit('close')">
                Cancel
              </button>
              <button class="modal-save-button" @click="$emit('close'); saveDetails();">
                Save
              </button>
            </slot>
          </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</script>

Answer 1

The easiest way would be to call a handler function. That function will be responsible of executing two lines of code, emit close event and call saveDetails function with the original event. You can do it in line or placing that handler in the methods. My personal preference is to avoid any logic on the template, just reference methods on it. Code will look like as follows.

new Vue({
el:'#app',
data: { 
    typeNames: [],
    siteNames: []
},
methods: {
    saveHandler(event) {
        this.$emit('close');
        this.saveDetails(event);
    },
    saveDetails: function(event){
        console.log(this.siteNames);
        console.log(this.typeNames); 
    }
}


<script type="text/x-template" id="add-modal-template">
  <transition name="addModal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
        <div class="uk-grid">

          <div class="modal_context uk-form-row uk-width-1-2">
            <slot name="site">
                <input type="checkbox" name='customeradded' value='customer'  v-modal="siteNames" data-md-icheck  />
                <label>Customer</label><br>
                <input type="checkbox" name='InternalSiteadded' value='InternalSite' v-modal="siteNames" data-md-icheck  />
                <label>InternalSite</label><br>
                <input type="checkbox" name='mixadded' value='mix' v-modal="siteNames" data-md-icheck  />
                <label>mix</label><br>
            </slot>
          </div>

          <div class="modal_type uk-form-row uk-width-1-2">
            <slot name="type">
                <input type="checkbox" name='marketingadded' value='marketing' v-modal="typeNames" data-md-icheck  />
                <label>marketing</label><br>
                <input type="checkbox" name='catalogadded' value='catalog' v-modal="typeNames" data-md-icheck  />
                <label>catalog</label><br>
            </slot>
          </div>

          <div class="modal-footer uk-form-row uk-width-1-1">
            <slot name="footer">
              <button class="modal-default-button" @click="$emit('close')">
                Cancel
              </button>
              <button class="modal-save-button" @click="saveHandler">
                Save
              </button>
            </slot>
          </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</script>

Despite this. I can see your code in incomplete and this will not work, because your Vue instance is not bind to that template. It does not exist such node with id="app" . Looks like you want to emit close but I don't understand who is the parent component listening to that close event.

Answer 2

Define it as a component and trigger event with data you want to pass when a user clicks. https://v2.vuejs.org/v2/guide/components.html