Как отобразить текстовое поле Django в шаблоне VueJs

Как отобразить текстовое поле Django в шаблоне VueJs

06.01.2020 12:47:34 Просмотров 35 Источник

Я пишу свой бэкэнд, используя DRFи используя VueJS

При рендеринге 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>

Есть здесь кто-нибудь, кто может указать мне правильное направление?

У вопроса есть решение - Посмотреть?

Ответы - Как отобразить текстовое поле Django в шаблоне VueJs / How to render Django TextField within VueJs Template

Является ответом!
Dutch77

06.01.2020 10:49:17

Вам нужно использовать V-в HTML-атрибута для отображения сырого содержания. https://vuejs.org/v2/guide/syntax.html

https://stackoverflow.com/questions/59604492/how-to-render-django-textfield-within-vuejs-template/59608424#comment105391022_59608424
потребовалось время, чтобы узнать это, но есть предупреждение безопасности при использовании этого с пользователями, входящими в области данных.
https://stackoverflow.com/questions/59604492/how-to-render-django-textfield-within-vuejs-template/59608424#comment105392427_59608424
Да. У вас должна быть какая-то функция, которая отображает только разрешенные HTML-теги, таким образом предотвращая ввод вредоносного javascript (например).
Закрыть X