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

Question

尝试做一个简单的输入框。默认值应该是一个数据库值，当用户更新该值时，它也会更新数据库。我正在使用 Laravel 5.5，这是一个 vue 组件。因此，数据库中的初始值为 3，但如果有人更改了该值，它也会更新数据库。我在下面的内容中走在正确的轨道上，还是偏离了方向？目前它不会获得初始金额，也不会更新。

<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>

这是路线(做了一些编辑，现在更新):

Route::post('/corn', function () {
$test = App\Resource::where('user_id', Auth::id())->update(['cornquant' => request('amount')]);
return $test;
});

Answer 1

在 debounce 中使用 es6 箭头函数来保留 this。然后删除 var vm = this 并像 this.corn = response.data 一样分配给 Jade 米。

您最初在哪里调用 getCorn？