模态渲染模板中的Vue调用函数

Question

我有一个弹出复选框的模式，这些复选框似乎在选中时成功地将值添加到我的两个数据道具中。但是，在提交时，我在调用的函数上收到错误。

我认为这是因为调用该函数的按钮位于呈现的模态模板中，并且看不到全局函数。

我该如何解决这个问题，以便点击“保存”可以正确调用 saveDetails，以便我可以收集表单信息以通过 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

最简单的方法是调用处理函数。该函数将负责执行两行代码，发出关闭事件并使用原始事件调用 saveDetails 函数。您可以在线执行或将该处理程序放在方法中。我个人的偏好是避免模板上的任何逻辑，只是引用它上面的方法。代码如下所示。

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>

尽管如此。我可以看到您的代码不完整，这将不起作用，因为您的 Vue 实例未绑定到该模板。它不存在带有id="app" 的此类节点。看起来您想发出 close，但我不明白谁是监听该 close 事件的父组件。

Answer 2

将其定义为一个组件，并在用户点击时使用您想要传递的数据触发事件。 https://vuejs.org/v2/guide/components.html