Php 拉威尔+；带有数据库值和更新的Vuejs输入表单

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

---

在反Bounce中使用es6箭头功能来保留

此

。然后删除var vm=this并分配给corn like

this.corn=response.data

---

您最初在哪里调用

getCorn

？

已将所有内容排序。定义默认值是最困难的部分，但最终还是很容易

以下是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>

---

请显示绑定到

/corn/{amount}

路由的路由定义和控制器操作。另外，未调用

getCorn

方法…为getCorn添加了路由和监视方法。

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