Laravel + Vuejs Input Form With Database Value and Update - php

Question

Trying to do a simple input box. The default value should be a database value, and when user updates the value, it also updates the database. I'm using Laravel 5.5 and this is a vue component. So the initial value would be 3 from the database, but then if someone changes the value, it would also update the database. Am I on the right track with what's below, or am I way off? Currently it won't get the initial amount, and it won't update.
<template>
<div>Corn: <input v-model="corn" style="width: 50px;" /></div>
</template>
<script>
export default {
data: function() {
return {
items: 'not updated',
corn: items.cornquant
} },
watch: { // whenever amount changes, function will run
corn: function(newCorn, oldCorn) {
this.corn = '2'
this.getCorn()
} },
mounted: function() {
this.getVueItems();
},
methods: {
getVueItems: function() {
axios.get('/testing').then(response => {
this.items = response.data;
}); },
getCorn: _.debounce(
function() {
this.corn = 'Thinking...'
var vm = this
axios.put('/corn/{amount}').then(response => {
vm.corn = response.data;
}) },
// milliseconds we wait for user to stop typing.
500
) }, }
</script>
And here's the route (did a little editing, this updates now):
Route::post('/corn', function () {
$test = App\Resource::where('user_id', Auth::id())->update(['cornquant' => request('amount')]);
return $test;
});

Answer 1

Use an es6 arrow function in debounce to preserve this. Then remove var vm = this and assign to corn like this.corn = response.data.
And where are you initially calling getCorn?

Answer 2

Got everything sorted. Defining default values was the hardest part, but ended up being easy enough!
Here's the vue template file:
<template>
<div>Corn: <input v-model="corn" style="width: 50px;" /></div>
</template>
<script>
export default {
data: function() {
return {
items: 'not updated',
corn: '0'
} },
watch: { // whenever input amount changes, function will run
corn: function() {
this.getCorn()
} },
mounted: function() {
this.getVueItems(); //this will call the actual corn value to put as the default value
},
methods: {
getVueItems: function() {
axios.get('/testing').then(response => {
this.items = response.data;
this.corn = response.data.cornlq; //set initial value
}); },
getCorn: _.debounce(
function() {
var vm = this
axios.post('/corn', { //updates database
corn: this.corn,
}).then(response => {
vm.corn = response.data.cornlq; //keeps actual database value in input
}) },
2000
) }, }
</script>
And the route:
Route::post('/corn', function () {
App\Resource::where('user_id', Auth::id())->update(['cornlq' => request('corn')]); //update database with new amount
$result = App\Resource::where('user_id', Auth::id())->first(); //save all amounts to $result
return $result; //return result so I can update the vue
});