Laravel + Vuejs输入表单，具有数据库值和更新

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
});