javascript - 条件渲染:组件或数据

我正在尝试使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];
            }
        }
    }
});

我之所以尝试使用过滤器来实现该功能，是因为禁用了编辑模式时，我不想做任何包装，例如span或div（因为它是任何组件的根实例所必需的）。

也许这是实现必要功能的更好方法，但我没有找到它。有谁知道如何使这项工作吗？谢谢！

最佳答案

如果我正确理解问题，则可以使用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>