[英]Conditional rendering: component or data
I'm trying to make editor functionality for page with Vue2.我正在尝试使用 Vue2 为页面制作编辑器功能。 On a page there is a 'editable' filter.
在页面上有一个“可编辑”过滤器。 It recieves content_id.
它接收 content_id。 Using this content_id we should recieve data from root Vue instance (for example pageContent.mainTitle).
使用这个 content_id,我们应该从根 Vue 实例(例如 pageContent.mainTitle)接收数据。 Depending on editModeOn root variable we should render component or just output appropriate (for example
<editable content="mainTitle" />
or content in mainTitle key).根据 editModeOn 根变量,我们应该渲染组件或仅输出适当的(例如
<editable content="mainTitle" />
或 mainTitle 键中的内容)。
Skeleton of HTML: HTML的骨架:
<div id="root">
{{ 'mainContent' | editable }}
<label class="checkbox">
<input type="checkbox" v-model="editModeOn">
Switch edit mode
</label>
</div>
And a Vue instance:还有一个 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];
}
}
}
});
The reason why I'm trying to achieve that functionality using filters is because of when edit mode disabled I don't want to make any wrapper like span or div (as it nesessary as root instance of any component).我尝试使用过滤器实现该功能的原因是,当禁用编辑模式时,我不想制作像 span 或 div 这样的任何包装器(因为它必须作为任何组件的根实例)。
Maybe it's a better way to achieve nesessary functionality, but I didn't find it.也许这是实现必要功能的更好方法,但我没有找到。 Has anyone an idea how to make this work?
有谁知道如何使这项工作? Thanks!
谢谢!
If I understand the problem correctly, you can solve this with a template
.如果我正确理解问题,您可以使用
template
解决此问题。 A template tag is not rendered.不呈现模板标签。
<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>
Looking at the html, the contentId is hard-coded into the div, so I presume you'd have many such divs on the page.查看 html,contentId 被硬编码到 div 中,所以我认为您在页面上有很多这样的 div。 I'd make a component and pass in 'content' attribute.
我会制作一个组件并传入“内容”属性。
Switching between edit and display can be with v-show可以使用 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
}
})
On the main page在主页上
<editable :content.sync="pageContent['mainTitle']"></editable>
<editable :content.sync="pageContent['mainContent']"></editable>
or perhaps也许
<editable v-for="item in pageContent" content.sync="item"></editable>
Some notes:一些注意事项:
Using v-show instead of v-if means the user can toggle back and forth between show and edit as desired, v-show keeps the edit in memory between mode but v-if destroys the edit node.使用 v-show 而不是 v-if 意味着用户可以根据需要在 show 和 edit 之间来回切换, v-show 将编辑保留在模式之间的内存中,但 v-if 会破坏编辑节点。
Using the .sync modifier allows the edits to be passed up to the parent, see .sync使用.sync修饰符允许将编辑传递给父级,请参阅.sync
I haven't tested this, so it may need some tweaking, but you get the idea.我还没有测试过这个,所以它可能需要一些调整,但你明白了。 See working example codepen请参阅工作示例代码笔
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.