如何在VueJs模板中呈现Django文本字段

我正在使用

DRF

和

VueJS

前端模板编写后端。在管理面板中，我使用Ckeditor编辑文本字段

class ArticleModelForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorUploadingWidget)
    class Meta:
       model=Article
       fields = [ "title", "slug" "published_at"]

在渲染post

TextField

时，我无法使用模板过滤器正确渲染，因此文本似乎已损坏。我尝试了很多事情，但还没有成功

<template>
<div>
    <div class="container negative-margin-top150">
        <div class="col col-xl-8 m-auto col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="ui-block">
                <!-- Single Post -->
                <article class="hentry blog-post single-post single-post-v1">
                    <div class="post-content-wrap">
                        <div class="post-content" >
                            <p class="post-paragraph">
                                {{article.content}}
                            </p>
                            <p>{{content}}</p>
                        </div>
                    </div>
                </article>
                <!-- ... end Single Post -->
            </div>
        </div>
    </div>
</div>  
</template>

{{article.content}

{{content}}

下面是我的剧本

<script>

    import axios from 'axios';
    export default {
        name: "Article",
        props: {
            slug: {
                type: String,
                required: true
            }
        },
        data() {
            return {
                article: {},
                content: `${content}`,

            }
         },
       methods: {
            setPageTitle(title) {
                document.title = title;
            },
            setRequestUser() {
                this.requestUser = window.localStorage.getItem("username");
            },
            getArticle(slug) {
              axios.get(`http://localhost:8000/api/articles/${this.slug}`)
                    .then(response => {
                        this.article = response.data;
                        this.setPageTitle(response.data.title);
                        this.content = window.content;

              });
            }
        },
        created() {
            this.getArticle();
            this.setRequestUser();

        },
    };
    </script>

从“axios”导入axios；
导出默认值{
名称：“文章”，
道具：{
鼻涕虫：{
类型：字符串，
必填项：true
}
},
数据（）{
返回{
第条：{}，
内容：`${content}`，
}
},
方法：{
setPageTitle（标题）{
document.title=标题；
},
setRequestUser（）{
this.requestUser=window.localStorage.getItem（“用户名”）；
},
getArticle（slug）{
axios.get(`http://localhost:8000/api/articles/${this.slug}`）
。然后（响应=>{
this.article=response.data；
this.setPageTitle（response.data.title）；
this.content=window.content；
});
}
},
创建（）{
这个.getArticle（）；
此参数为.setRequestUser（）；
},
};

现在，在浏览器中，我的文本使用模板标记呈现

<h3>The standard Lorem Ipsum passage, used since the 1500s</h3>

<p>&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;</p>

标准Lorem Ipsum通道，自1500年代起使用
“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔不轻率的行为外，还必须为自己的行为负责。”

---

这里有谁能告诉我正确的方向吗？

您需要使用v-html属性来呈现原始内容。

---

了解这一点需要时间，但当用户进入数据区域时，使用它会有一个安全警告。是的。您应该具有一些只呈现允许的html标记的功能，从而防止注入恶意javascript（例如）。