Vue：方法不是内联模板组件标记中的函数

Question

我有这个组件：

<template>
  <div class="modal fade modal-primary" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="ImageLabel"
       aria-hidden="true">
    <div class="modal-dialog modal-lg animated zoomIn animated-3x">
      <div class="modal-content">
        <ais-index index-name="templates"
                   app-id="BZF8JU37VR"
                   api-key="33936dae4a732cde18cc6d77ba396b27">
          <div class="modal-header">
            <algolia-menu :attribute="category"
                          :class-names="{ 'nav-item__item': 'nav-color', 'nav-item__link': 'nav-link', 'nav-item__item--active': 'active'}">
            </algolia-menu>
          </div>

          <div class="modal-body">
            <div class="container">
              <ais-results :results-per-page="10" inline-template>
                <div class="row">
                  <div class="col-6" v-for="result in results.slice(0, 5)" :key="result.objectID">
                    <div class="card" @click="getTemplate(result)">
                      <img class="img-fluid" v-lazy="result.image"/>
                      <div class="card-body">
                        <p>{{ result.description }}</p>
                      </div>
                      <div class="card-footer">
                        <small>Created: {{ result.created_at }}</small>
                      </div>
                    </div>
                  </div>
                  <div class="col-6" v-for="result in results.slice(5, 10)" :key="result.objectID">
                    <div class="card">
                      <img class="img-fluid" v-lazy="result.image"/>
                      <div class="card-body">
                        <p>{{ result.description }}</p>
                      </div>
                      <div class="card-footer">
                        <small>Created: {{ result.created_at }}</small>
                      </div>
                    </div>
                  </div>
                </div>
              </ais-results>
            </div>
          </div>
        </ais-index>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          <button type="button" class="btn  btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Algolia from '@/components/algolia/menu';

  export default {
    components: {
      "algolia-menu": Algolia,
    },
    data() {
      return {
        category: 'category',
      };
    },
    methods: {
      getTemplate(result) {
        console.log(result)
      }
    }
  }
</script>

我在我的 <ais-results> 标签中的 .card div 上有一个点击侦听器，它调用我的 getTemplate 方法。但是，每当我单击该元素时，它都会产生此错误：

imageModal.vue?8d74:85 Uncaught TypeError: _vm.getTemplate is not a function at click (imageModal.vue?8d74:85) at invoker (vue.runtime.esm.js:2023) at HTMLDivElement.fn._withTask.fn._withTask

为什么会这样？我也试过 @click.native，但没用。

Answer 1

问题是您正在为 <ais-results> 组件标签使用 inline template，因此该标签中的数据引用仅限于 <ais-results> 实例。这意味着 Vue 正在 <ais-results> 组件上寻找 getTemplate 方法，但没有找到它。

在您的情况下，您可以使用 result 数据发出一个事件，然后在 <ais-results> 标签上监听该事件，而不是直接调用 getTemplate。

下面是一个简化的示例，其中单击内联模板中的 .card div 将发出 card-click 事件 (@click="$emit('card-click', result)")。 <ais-results> 标记具有该事件的侦听器 (@card-click="getTemplate")，因此当 card-click 事件被触发时，getTemplate 方法将与 result 一起调用数据自动传递。

<ais-results :results-per-page="10" inline-template @card-click="getTemplate">
  <div class="row">
    <div class="col-6" v-for="result in results.slice(0, 5)" :key="result.objectID">
      <div class="card" @click="$emit('card-click', result)">
        ...
      </div>
    </div>
  </div>
</ais-results>

Vue：方法不是内联模板组件标记中的函数

Vue: method is not a function within inline-template component tag

vue.js

vue-component

vuejs2

nuxt.js