v-if, v-else, v-else-if에서 동일한 구성 요소 태그가 Vue 인스턴스를 공유하지 못하도록 방지

v-if, v-else, v-else-if에서 동일한 구성 요소 태그가 Vue 인스턴스를 공유하지 못하도록 방지

VueJS 구성 요소가 있음<managed-list>같은 템플릿에서 두 번 사용하는 두 개의 다른 데이터 세트를 서로 다르게 표시하기 위해각각 고유한 방식으로 표시됨<section>를 사용하여 토글한 용기v-if해협을 타고

이러한 요소들이 동일한 인스턴스로 인스턴스화되고 있는 것으로 보인다.나는 부른다console.log()에서created구성 요소의 후크, 페이지 로드 시 콘솔에 메시지가 표시됨.그러나 다른 데이터 테이블을 표시하기 위해 탭오버를 하면 적절한 템플릿v-if렌더링 하지만created훅은 다시 불이 붙지 않는다.

내가 이해한 것은 사용할 때v-if템플릿의 문, 구성요소가 적절히 생성되고 파괴된다.그러나 내 경우에는 이런 일이 일어나지 않는 것 같다.내가 뭘 잘못하고 있나요?

<template>
  <div>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <router-link class="nav-link" :class="{active: $route.params.tab=='reports'}" to="reports">Reports</router-link>
      </li>
      <li class="nav-item">
        <router-link class="nav-link" :class="{active: $route.params.tab=='snippets'}" to="snippets">Snippets</router-link>
      </li>
    </ul>

    <section v-if="$route.params.tab == 'reports'">
      <h2>Reports</h2>

      <managed-list 
        :imports-disabled="true" 
        prop-delete-endpoint="ReportTemplate/delete" 
        prop-resource-url="ReportTemplate"
        :prop-fetch-url="'ReportTemplate/filter?filters='+reportFilter"
        prop-edit-action="/reports/templates/edit/{?}">
      </managed-list>
    </section>

    <section v-else-if="$route.params.tab == 'snippets'">
      <h2>Snippets</h2>

      <managed-list 
        :imports-disabled="true" 
        prop-delete-endpoint="ReportTemplate/delete" 
        prop-resource-url="ReportTemplate"
        :prop-fetch-url="'ReportTemplate/filter?filters='+snippetFilter"
        prop-edit-action="/reports/templates/edit/{?}">
      </managed-list>
    </section>
  </div>

</template>

<script>
import ManagedList from "./ManagedList"
import bus from '../bus.js'

export default {
  name: 'ReportTemplates',
  components: {
    ManagedList
  },
  data() {
    return {
      snippetFilter : JSON.stringify([
        ["is_snippet","=", 1]
      ]),
      reportFilter : JSON.stringify([
        ["is_snippet","=", 0]
      ])
    }
  },
  created() {
    console.log(this.snippetFilter, this.reportFilter)
  }
}
</script>

이는 기본적으로 Vue가 가능한 경우 구성 요소를 재사용하여 시간을 절약하려고 하기 때문이다.당신의<managed-list>구성 요소가 두 가지 모두 가능<section>의 꼬리표.v-if, 그리고v-else-if그래서 Vue는 그 구성 요소를 파괴하고 즉시 다시 렌더링하는 대신 그냥 주변에 두려고 한다.

만약 당신이 Vue에게 두개의 각각을 연결하도록 강요하고 싶다면.<managed-list>고유한 구성요소가 있는 태그, 고유한 구성요소를 추가하십시오.key각 구성 요소 태그의 특성:

<section v-if="$route.params.tab == 'reports'">
  <h2>Reports</h2>
  <managed-list key="reports" ... />
</section>

<section v-else-if="$route.params.tab == 'snippets'">
  <h2>Snippets</h2>
  <managed-list key="snippets" ... />
</section>

여기에 그것에 대한 Vue 설명서가 있다.

---

여기 간단한 예제가 있다.

Vue.component('child', {
  template: '<p>I am child</p>',
  created() {
    console.log('created')
  }
})

new Vue({
  el: '#app',
  data() {
    return { foo: 'a' }
  },
  methods: {
    toggle() {
      this.foo = (this.foo === 'a') ? 'b' : 'a';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <button @click="toggle">
    Toggle Children
  </button>

  <template v-if="foo === 'a'">
    <div> 
      A <child key="a"></child>    
    </div>
  </template>
  <template v-else-if="foo === 'b'">
    <div> 
      B <child key="b"></child>    
    </div>
  </template>
</div>

참조URL: https://stackoverflow.com/questions/46895988/prevent-same-component-tags-in-v-if-v-else-v-else-if-from-sharing-a-vue-instan