After submitting form Redirect to home page by using Django, python with vue axiox

Question

When user filled form then after submitting form form needs to redirect to another page. I have tried but I am new to vue so, I am not able to understand how to achieve this please help me to achieve this thank you.

html

<div id="app">
    <form>
        <input type="text" v-model="username">
        <input type="password" v-model="password">
        <input v-on:click.prevent="submitForm" type="submit" value="submit">
    </form>

</div>

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(
             this.posts.push(response.data);
          });
          },

        },

    });
    Vue.config.productionTip = false


</script>

This is my view code to save data into databse. views.py

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":
        data = json.loads(request.body)
        username = data['username']
        print("username", str(username))
        # password = data['password']
        # print("password", str(password))
        saveform = vue_testing(username=username,
                               )
        saveform.save()
        return redirect("/")
        # if username and 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')

question from:https://stackoverflow.com/questions/65886145/after-submitting-form-redirect-to-home-page-by-using-django-python-with-vue-axi

Answer 1

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>