Как визуализировать Django TextField в VueJs Шаблон

Question

Я пишу свой бэкэнд, используя DRF и используя VueJS шаблоны внешнего интерфейса. В административной панели я использую Ckeditor для редактирования текстового поля.

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

Во время рендеринга сообщения 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