Vue在模態渲染模板中調用function

Question

我有一個彈出復選框的模式，這些復選框似乎在選中時成功地將值添加到我的兩個數據道具中。 但是，在提交時，我在名為 function 上收到錯誤消息。

我認為這是因為調用 function 的按鈕位於呈現的模態模板中，並且看不到全局 function。

我該如何解決這個問題，以便點擊“保存”將正確調用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

最簡單的方法是調用處理程序 function。 function 將負責執行兩行代碼，發出關閉事件並使用原始事件調用 saveDetails function。 您可以在線執行或將該處理程序放在方法中。 我個人的偏好是避免模板上的任何邏輯，只是引用它上面的方法。 代碼如下所示。

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://v2.vuejs.org/v2/guide/components.html