javascript - Vue 在渲染模板中调用函数以进行模态

Question

我有一个弹出的模式，其中包含复选框，在检查时似乎已成功将值添加到我的两个数据 Prop 中。但是，提交后我在被调用的函数上收到错误。

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

如何解决此问题，以便点击“保存”可以正确调用 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

最简单的方法是调用处理函数。该函数将负责执行两行代码，发出 close 事件并使用原始事件调用 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 实例没有绑定(bind)到该模板。不存在id="app"这样的节点。看起来您想发出 close 但我不明白谁是监听该 close 事件的父组件。