有條件呈現：組件或數據

我正在嘗試使用Vue2爲頁面編輯器功能。在頁面上有一個'可編輯'的過濾器。它接收content_id。使用這個content_id，我們應該從根Vue實例接收數據（例如pageContent.mainTitle）。根據editModeOn根變量，我們應該渲染組件或僅輸出合適的（例如<editable content="mainTitle" />或mainTitle項中的內容）。有條件呈現：組件或數據

骨架HTML的：

<div id="root"> 
    {{ 'mainContent' | editable }} 

    <label class="checkbox"> 
     <input type="checkbox" v-model="editModeOn"> 
     Switch edit mode 
    </label> 
</div>

而且一個Vue公司的實例：

new Vue({ 
    el: '#root', 
    data: { 
     editModeOn: true, 
     pageContent: { 
      mainTitle: "Test title", 
      mainContent: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, et!" 
     } 
    }, 
    filters: { 
     editable(contentId) { 
      if (!this.editModeOn) { 
       return `<editable content="{{ this.pageContent[contentId] }}" />`; 
      } else { 
       return this.pageContent[contentId]; 
      } 
     } 
    } 
});

爲什麼我想要實現使用過濾器功能的原因是因爲當編輯模式中，禁止我不要的」 t想要製作任何類似span或div的包裝器（因爲它作爲任何組件的根實例都是必需的）。

也許這是一個更好的方式來實現nesessary功能，但我沒有找到它。有沒有人有一個想法如何使這項工作？謝謝！

來源

2017-09-25 bashkovpd

如果我正確理解問題，則可以使用template解決此問題。模板標籤不會呈現。

<div id="root"> 
    <template v-if="!editModeOn"> 
     {{pageContent['mainContent']}} 
    </template> 
    <editable v-else :content="pageContent['mainContent']" /> 

    <label class="checkbox"> 
     <input type="checkbox" v-model="editModeOn"> 
     Switch edit mode 
    </label> 
</div>

來源

2017-09-25 20:58:34 Bert

是的，這會的工作，但我試圖讓使用簡單組件（如'<編輯的content_id = 「MAINTITLE」/>'或'{{ '搜索Maincontent' 的東西|編輯} }'並且不要添加插入該組件的巨大構造。 – bashkovpd

v-if和v-else不需要匹配標籤嗎？ –

@RichardMatsen沒有。https://codepen.io/Kradek/pen/EwZXGK?editors=1010 – Bert

看着html，contentId被硬編碼到div中，所以我認爲你會在頁面上有很多這樣的div。我會創建一個組件並傳入「內容」屬性。
編輯和顯示之間切換可以與V-顯示

Vue.component('editable', { 
    template: ` 
    <div> 
     <div v-show="!editModeOn">{{ content }}</div> 
     <div v-show="editModeOn"> 
     <input :value="content" @input="$emit('update:content', $event.target.value)"></input> 
     </div> 

     <label class="checkbox"> 
     <input type="checkbox" v-model="editModeOn"> 
     Switch edit mode 
     </label> 
    </div> 
    `, 
    props: ['content'], 
    data { 
    editModeOn: false 
    } 
})

在主頁

<editable :content.sync="pageContent['mainTitle']"></editable>  
<editable :content.sync="pageContent['mainContent']"></editable>

或許

<editable v-for="item in pageContent" content.sync="item"></editable>

一些注意事項：

使用V-顯示而不是v-if表示用戶可以在show和ed之間來回切換它根據需要，v-show將模式中的編輯保留在內存中，但v-if會破壞編輯節點。

使用.SYNC修改允許編輯傳遞到父，見.sync

~~我沒有測試過這一點，所以它可能需要一些調整，但你的想法。~~ 見工作示例codepen

來源

2017-09-25 21:02:33

有條件呈現：組件或數據

回答

相關問題