Laravel + Vuejs 输入表单，带数据库值和更新答案

【问题标题】：Laravel + Vuejs Input Form With Database Value and UpdateLaravel + Vuejs 输入表单，带数据库值和更新
【发布时间】：2018-01-20 16:11:35
【问题描述】：

尝试做一个简单的输入框。默认值应该是数据库值，当用户更新该值时，它也会更新数据库。我正在使用 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;
});

【问题讨论】：

请显示路由定义和绑定到/corn/{amount} 路由的控制器操作。也没有调用getCorn 方法...

标签： php laravel vue.js

【解决方案1】：

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

你最初在哪里打电话给getCorn？

【讨论】：

添加getCorn的路由和监听方法

【解决方案2】：

一切都整理好了。定义默认值是最难的部分，但最终很容易！

vue 模板文件如下：

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

还有路线：

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

【讨论】：