vue if、v-else、v-else-ifの同じコンポーネントタグがVueインスタンスを共有しないようにする

Question

VueJSコンポーネント<managed-list>があります。これは同じテンプレートで2回使用して2つの異なるデータセット。それぞれは、独自の<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>コンポーネントは<section>タグの両方ともv-ifとv-else-ifのペアであるため、Vueはそのコンポーネントを破棄してすぐに再描画するのではなく、そのコンポーネントを保持しています。

あなたは、独自のコンポーネントを持つ2個の<managed-list>各タグを関連付けるためにVueのを強制したい場合は、各コンポーネントタグにユニークな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>