有条件呈现：组件或数据

我正在尝试使用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

有条件呈现：组件或数据

回答

相关问题