v-if, v-else, v-else-if에서 동일한 구성 요소 태그가 Vue 인스턴스를 공유하지 못하게합니다.

Question

동일한 VueJS 구성 요소 <managed-list>을 두 번 사용하여 두 개의 다른 데이터 집합 . 각각은 고유 한 <section> 컨테이너에 표시되며,이 컨테이너는 nav-tab에서 v-if을 사용하여 토글됩니다.

이러한 구성 요소가 동일한 인스턴스로 인스턴스화 된 것으로 보입니다. 구성 요소의 created 후크에 console.log()을 호출하고 페이지로드시 콘솔에 메시지를받습니다. 그러나 다른 데이터 표를 표시하기 위해 탭으로 이동하면 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> 

Answer 1

기본적으로 Vue는 가능한 경우 구성 요소를 다시 사용하여 시간을 절약하기 때문에 발생합니다. <managed-list> 구성 요소는 모두 v-if 및 v-else-if 쌍의 <section> 태그에 모두 포함될 수 있습니다. 따라서 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> 

Here's the Vue documentation on that.

---

는 여기 간단하고 예시적인 예 :

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>