Commit einer Komponente in der Vuex

Question

Meine Vue App hat eine Sidebar, ich möchte eine Komponente als Kind anzeigen.

Ich versuche, die Komponente zu übergeben, indem Sie es mit einem Vuex-Speicher übergeben, aber es scheint nicht zu funktionieren.

Ich verwende v-html, um zu testen, ob Sidebar-Komponente die untergeordnete Komponente anzeigen kann.

<div v-if="rightPanelOpen" class="right-panel" v-html="rightPanelComponent"></div> 

die berechnete Eigenschaft (rightPanelComponent):

rightPanelComponent() { 
    if(this.$store.state.boardRightPanel.component === false) { 
     return "<div style='display: flex; align-items: center; justify-content: center; flex-grow: 1; height: 100%;'>Nothing found.</div>" 
    } else { 
     return this.$store.state.boardRightPanel.component 
    } 
    }, 

ich auf diese Weise das Kind Komponente mich um,

import About from '@/components/boards/post/About' 

created() { 
    document.title = 'loading ...' 
    this.$store.commit('toggleRightPanel', true) // This will show the sidebar 
    this.$store.commit('rightPanelContent', About) // This is where i am trying to send the child component for the sidebar 

}, 

Wie ich eine untergeordnete Komponente in der Seitenleiste in diesem Display können Szenario?

Answer 1

v-html ist eine vorverarbeitete Direktive! Die Dokumentation lautet:

Beachten Sie, dass die Inhalte als einfache HTML eingefügt werden - sie werden nicht als Vue-Vorlagen kompiliert werden. Wenn Sie versuchen, mit v-html Vorlagen zu erstellen, versuchen Sie, die Lösung zu überarbeiten, indem Sie stattdessen Komponenten verwenden. (https://vuejs.org/v2/api/#v-html).

Mein Vorschlag ist, dass Sie eine Komponente (https://vuejs.org/v2/guide/components.html) erstellen und in Ihrem rightPanelContent einfügen. Der Inhalt dieser Komponente kann mit Requisiten (https://vuejs.org/v2/guide/components.html#Props) übergeben/kontrolliert werden.

Answer 2

Vue dynamische Komponenten verwenden eine Komponente Element mit ist Attribut.
Beachten Sie die Bindesyntax (: is = "...").

Seiten panel.vue

<template> 
    <component v-if="rightPanelComponent" :is="rightPanelComponent"></component> 
    <div v-if="!rightPanelComponent" style='...'>Nothing found</div> 
</template> 

computed { 
    rightPanelComponent() { 
    return this.$store.state.boardRightPanel.componentTag 
    } 
} 

Simplest ist es, alle Komponenten Entscheidungen in Haupt deklarieren:

main.js

import About from '@/components/About.vue 
import Another from '@/components/Another.vue 

Vue.component('my-about', About) 
Vue.component('my-another', Another) 

aber Sie können alle möglichen Kinder Komponenten lokal in der Seitenplatte erklären:

Seiten panel.vue

import About from '@/components/About.vue 
import Another from '@/components/Another.vue 

components: { 
    'my-about': About, 
    'my-another': Another 
} 

Parent.vue

// Set the side-panel component here by storing the tag 
this.$store.commit('rightPanelContent', 'my-about')