API JQuery и Vuejs не передают и не извлекают данные из базы данных Django

Я работал над веб-приложением, используя Django, и мне пришлось сделать перерыв на 3 месяца. Я решил продолжить, и вдруг весь мой код jquery и vuejs не работает, хотя 3 месяца назад он прекрасно работал. (И, возможно, я мог сделать изменения в последнюю минуту перед перерывом, которые повлияли на JS до того, как я ушел на перерыв)

Это мой base.html

<head>
  <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
  
  <!-- Vue Js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- JQuery script -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

urls.py

from conversation.api import api_add_message
urlpatterns = [
    path('api/add_message/', api_add_message, name='api_add_message'),
   ]

api.py

import json
from django.http import JsonResponse
from django.contrib.auth.decorators import login_required
from .models import ConversationMessage

@login_required
def api_add_message(request):
    data = json.loads(request.body)
    content = data['content']
    conversation_id = data['conversation_id']

    message = ConversationMessage.objects.create(conversation_id=conversation_id, content=content, created_by=request.user)

template.html

<li class="chat-left" v-for="message in messages">
   <div class="chat-avatar">
      <img  :src="message.image"alt="Retail Admin">
          <div class="chat-name">[[ message.user ]]</div>
       </div>
     <div class="chat-text">[[ message.content ]]</div>
     <div class="chat-hour">[[ message.user ]]</div>
</li>

А это мой скрипт в шаблоне

{% block script %}
<script>
    var conversationapp = new Vue({
        el: '#conversationapp',
        delimiters: ['[[', ']]'],
        data () {
            return {
                messages: [],
                content: '',
                user: '{{ request.user.username }}',
                created_at: 'Now',
                image: '{% if request.user.profile.image %}{{ request.user.profile.image.url }}{% endif %}'
            }
        },
        methods: {
            submitMessage() {
                if (this.content.length > 0) {
                    var message = {
                        'content': this.content,
                        'user': this.user,
                        'created_at': this.created_at,
                        'image': this.image,
                        'conversation_id': '{{ conversation.id }}'
                    };

                    this.messages.unshift(message);

                    fetch('/api/add_message/', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': '{{ csrf_token }}'
                        },
                        credentials: 'same-origin',
                        body: JSON.stringify(message)
                    })
                    .then((response) => {
                        console.log(response)
                    })
                    .catch((error) => {
                        console.log(error);
                    })

                    this.content = '';
                }
            }
        }
    })
</script>
{% endblock %}

После рендеринга шаблона, вместо того, чтобы получить данные для замены в скобках [[]], он просто показывает скобки как есть. А когда я хочу передать данные в базу данных, он не делает этого.

Это пример одного из JS скриптов в моем проекте, однако, все JS в проекте не работают. Единственная ошибка, которую обнаруживает моя консоль, это ошибка CORS, при которой я не запрашиваю данные из другого домена. Я предполагаю, что получаю эту ошибку только потому, что использую иконки из fontawesome CDN. А когда я запускаю vuejs devtools для vuejs скриптов, он не обнаруживает никаких vuejs компонентов, хотя vuejs скрипты загружаются на сайт.

Учитывая, что он работал, я не знаю, с чего начать поиск неисправности, и какую область кода я должен показать здесь, чтобы увеличить мои шансы на помощь. Предложения будут приняты с благодарностью.

используйте {{имя_поля}} вместо []. и в django api всегда должен возвращать ответ, убедитесь, что ваш api возвращает ответ. как

return render(request, 'template_name.html', context={'message': message})
Вернуться на верх