[Vuejs]-After submitting form Redirect to home page by using Django, python with vue axiox

by

0👍

✅

Can you try these modifications :

from django.shortcuts import render
from django.http import JsonResponse
from .models import vue_testing
import json


def submit_form(request):
    if request.method == "POST":
        username = request.POST.get('username')
        password = request.POST.get('password')
      
        if username and password:
            saveform = vue_testing.objects.create(username=username, password=password)
            response = f"Welcome {username}"
            return JsonResponse({"msg": response}, status=201)
        else:
            response = "username or password is empty"
            return JsonResponse({"err": response}, status=400)

    return render(request, 'testing_vue.html')

vue.js

<script>
const vms = new Vue({
    delimiters: ['[[', ']]'],
  el: '#app',
        data: {
          username: null,
          password: null,

          success_msg: "",
          err_msg: "",

        },
        /* submiting post Ad form */
        methods: {
          submitForm: function(){
            axios({
                method : "POST",
                url:"{% url 'submitform' %}", //django path name
                headers: {'X-CSRFTOKEN': '{{ csrf_token }}',},
                data : {"username":this.username, "password":this.password},//data
              }).then((response) => {
                console.log(response)
                window.location.replace('{% url "home" %}')  // Replace home by the name of your home view
              }).catch((error) => {
                console.log(error)
              });
          },
        },
    });
    Vue.config.productionTip = false
</script>

Leave a comment