Question

我尝试使用Vue2为页面制作编辑器功能。在页面上有一个可编辑的＆＃39;过滤。它收到了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（因为它需要作为任何组件的根实例））。

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

Answer 1

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

Answer 2

查看html，contentId被硬编码到div中，所以我认为你在页面上有很多这样的div。我制作一个组件并传入内容＆＃39;属性。
在编辑和显示之间切换可以使用v-show

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-show代替v-if意味着用户可以根据需要在节目和编辑之间来回切换，v-show可以在模式之间保持编辑内存，但是v-如果销毁编辑节点。

使用 .sync 修饰符可以将修改传递给父级，请参阅.sync

~~我还没有对此进行过测试，所以可能需要进行一些调整，但你明白了。~~ 请参阅工作示例codepen

条件渲染：组件或数据

2 个答案: