如何在 VueJs 模板中呈现 Django TextField

Question

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

下面是我的脚本

<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>

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

<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>

这里有人能给我指出正确的方向吗？

Answer 1

您需要使用 v-html 属性来呈现原始内容。 https://vuejs.org/v2/guide/syntax.html

如何在 VueJs 模板中呈现 Django TextField

How to render Django TextField within VueJs Template

django

ckeditor

django-rest-framework

vue.js