Vue: 메서드가 인라인 템플릿 구성 요소 태그 내의 함수가 아님

Vue: 메서드가 인라인 템플릿 구성 요소 태그 내의 함수가 아님

다음 구성 요소가 있음:

<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>

나는 클릭 청취기를 가지고 있다..card내 안에 끼어들다<ais-results>내 이름을 부르는 꼬리표getTemplate방법의그러나 해당 요소를 클릭할 때마다 다음과 같은 오류가 발생한다.

imageModal.vue?8d74:85 Uncaused TypeError: _vm.getTemplate는 HTMLDivElement.fn의 호출자(vue.runtime.esm.js:2023)에서 클릭(imageModal.vue?8d74:85)으로 함수가 아니다._with태스크.fn._with태스크

왜 이런 일이 생기는 건가요?난 시도했다.@click.native그것도 그렇지만 소용없었어

문제는 인라인 템플릿을 사용하여<ais-results>구성 요소 태그, 따라서 해당 태그 내의 데이터 참조 범위는<ais-results>인스턴스이것은 Vue가 A를 찾고 있다는 것을 의미한다.getTemplate에 대한 방법.<ais-results>구성 요소, 그러나 찾지 못함.

당신의 경우, 직접 전화하는 대신getTemplate, 당신은 로 이벤트를 방출할 수 있다.result데이터를 입력한 다음<ais-results>꼬리표를 달다

---

아래는 다음을 클릭하는 간단한 예입니다..card인라인 템플릿에서 div를 실행하면card-click이벤트(이벤트@click="$emit('card-click', result)". The.<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>

참조URL: https://stackoverflow.com/questions/51658044/vue-method-is-not-a-function-within-inline-template-component-tag