How to render Django TextField within VueJs Template

Question

I am writing my backend using DRF and using VueJS frontend templates. In the admin panel I use Ckeditor to edit textfield.

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

While rendering a post TextField I can not use template filters to render correctly, so text seems ruined. I have tried lots of things but no success yet.

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

and my script is below

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

Now in the browser my text is rendered with template tags

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

Anybody here who can point me in the right direction?

Answer 1

You need to use v-html attribute to render raw conent. https://v2.vuejs.org/v2/guide/syntax.html