How to solve problem "Must be a valid json" - Django + Vue js - django

Question

I try to create object in Django with vue js + axios but somehowe this not work for me. I try in two ways and always I see in vue dev tools empty data. When I fill the data model in vuedev tools I see "Invalid value "Must be a valid Json"".
First way. I create a view that return jsonresponse.
#login_required
def save_embed(request):
if request.method == "POST":
form = SubmitEmbed(request.POST)
if form.is_valid():
url = form.cleaned_data['url']
r = requests.get('http://iframe.ly/api/oembed?url='+ url + '&api_key=' + IFRAMELYKEY)
data = r.json()
serializer = EmbedSerializer(data=data, context={'request': request})
if serializer.is_valid():
embed = serializer.save()
return JsonResponse(serializer.data, status=201, content_type="application/json", safe=False)
return JsonResponse(serializer.errors, status=400)
else:
form = SubmitEmbed()
return render(request, 'embed/embedadd.html', {'form': form})
Template:
<script>
new Vue({
el: '#app',
delimiters: ['!!', '!!'],
data () {
return {
url: "http://example.com"
}
},
methods: {
formSubmit(e) {
e.preventDefault();
let currentObj = this;
this.axios.post('http://wege.local:8000/recipes/recipe/embed/add/', {
url: this.url,
})
.then(function (response) {
currentObj.output = response.data;
})
.catch(function (error) {
currentObj.output = error;
});
}
}
});
</script>
Form:
<div id="app">
!! url.title !!
<form method="post" class="margin-bottom-25" #submit="formSubmit">
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-success-gradiant">Dodaj link</button>
</form>
</div>
In the url field has been added v-model "url".
as you can see in the screenshot below, when I fill in the url field, nothing happend
Second way is to create endpoint with rest framework in Django and then create templateview with code:
<div id="app">
<form method="post" class="margin-bottom-25" #submit="formSubmit">
{% csrf_token %}
<div class="form-group">
<label for="formGroupExampleInput">Adres przepisu*</label>
<input type="url" class="form-control" id="formGroupExampleInput" placeholder="Url" v-model="embed.url">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Tytuł</label>
<input class="form-control" id="formGroupExampleInput2" placeholder="Title" v-model="embed.title">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Description</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Description" v-model="embed.description">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Thumbnail_url</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Tthumbnail_url" v-model="embed.thumbnail_url">
</div>
<button type="submit" class="btn btn-success-gradiant">Dodaj link</button>
</form>
!! embed.title !!
!! embed.url !!
</div>
Vue js:
<script>
new Vue({
el: '#app',
delimiters: ['!!', '!!'],
data () {
return {
embed:{
url: 'http://example.com',
title: '',
description: '',
thumbnail_url: '',
}
}
},
methods: {
formSubmit(e) {
e.preventDefault();
let currentObj = this;
this.axios.post('http://wege.local:8000/recipes/embeds/', this.embed)
.then(function (response) {
currentObj.output = response.data;
})
.catch(function (error) {
currentObj.output = error;
});
}
}
});
</script>
In the second case the same problem, in vue tools the fields are still empty after completing the form.

Answer 1

I think your response is okay.
When/where do you define or gloabally bind axios to this? You keep trying this.axios, which does not exist. More on Vue instance properties here.
Unless I'm missing where you bind this.axios...
You need to import axios from "axios"; and do axios.post(...)
To see if your request is going out, try looking at the network tab in dev tools and see the requests that go out with the data! I see you're using firefox, check out the docs here