如何更新vue.js中的值？

Question

我需要編輯和更新值使用vue.js，

對於我已使用編輯來獲取值，我可以編輯，但我無法更新。

更新點擊按鈕：

<span><button type="submit" @click="updateItems" name="add" class="btn btn-default hidden-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Save"><i class="fa fa-floppy-o"></i><span class="hidden-sm hidden-xs"> Save</span></button></span> 

腳本編輯的：

<script> 
import config from '../../../config'; 
export default { 
    data(){ 
    return{ 
     items: [], 
     itemsData:{ 
     room_id : '', 
     start_date : '', 
     end_date : '', 
     package_id : '', 
     price : '', 
     child_price : '', 
     discount : '', 
     discount_type : '', 
     people : '', 
     price_sup : '', 
     fixed_sup : '', 
     tax_id : '', 
     taxes : '' 
     }, 

     errors: { 

     } 
    } 
    }, 

    created: function() { 
    this.fetchRates(this.$route.params.id); 
    }, 

    methods:{ 
    fetchRates(id){ 
     axios.get(config.apiDomain+'/Rates/'+id+'/edit').then((response)=>this.itemsData = response.data); 
    }, 

    updateItems(e){ 
     axios.put(config.apiDomain+'/Rates/'+this.$route.params.id, this.itemsData).then(response=>{ 
     // this.this.itemsData = ""; 
     this.$router.push('/admin/rates'); 
     }).catch(error=>{ 
     this.errors = error.response.data; 
     }); 
    } 
    }, 


    mounted() { 
    axios.get(config.apiDomain+'/Rates').then((response)=>this.items = response.data); 
    } 
} 
</script> 

更新控制器：

<?php 

命名空間應用\ HTTP \控制器;

use App\Rates; 
use Illuminate\Http\Request; 

class RatesController extends Controller 
{ 
    /** 
    * Display a listing of the resource. 
    * 
    * @return \Illuminate\Http\Response 
    */ 
    public function index() 
    { 
    $items = Rates::all(); 
    return $items; 
    } 

    /** 
    * Show the form for creating a new resource. 
    * 
    * @return \Illuminate\Http\Response 
    */ 
    public function create() 
    { 
    // 
    } 

    /** 
    * Store a newly created resource in storage. 
    * 
    * @param \Illuminate\Http\Request $request 
    * @return \Illuminate\Http\Response 
    */ 
    public function store(Request $request) 
    { 
    $this->validate($request, [ 
     'room_id' => 'required', 
     'start_date' => 'required', 
     'end_date' => 'required', 
     'price' => 'required' 
    ]); 

    $input = $request->all(); 

    Rates::create($input); 

    return Rates::Orderby('id', 'desc')->get(); 
    } 

    /** 
    * Display the specified resource. 
    * 
    * @param \App\Rates $rates 
    * @return \Illuminate\Http\Response 
    */ 
    public function show(Rates $rates) 
    { 
    // 
    } 

    /** 
    * Show the form for editing the specified resource. 
    * 
    * @param \App\Rates $rates 
    * @return \Illuminate\Http\Response 
    */ 
    public function edit($id) 
    { 
    return Rates::find($id); 
    } 

    /** 
    * Update the specified resource in storage. 
    * 
    * @param \Illuminate\Http\Request $request 
    * @param \App\Rates $rates 
    * @return \Illuminate\Http\Response 
    */ 
    public function update(Request $request, $id) 
    { 
    echo $id; 
    return 'hi'; 
    $rows = Rates::findOrFail($id); 

    $this->validate($request, [ 
     'room_id' => 'required', 
     'start_date' => 'required', 
     'end_date' => 'required', 
     'price' => 'required' 
    ]); 

    $input = $request->all(); 

    $rows->fill($input)->save(); 

    Session::flash('flash_message', 'Rates successfully Updated!'); 

    // return redirect()->route('Rates.vue'); 

    } 

    /** 
    * Remove the specified resource from storage. 
    * 
    * @param \App\Rates $rates 
    * @return \Illuminate\Http\Response 
    */ 
    public function destroy(Rates $rates) 
    { 
    // 
    } 
} 

有人投擲誤差，

XMLHttpRequest cannot load http://localhost/booking/booking-api/public/Rates/1. Method PUT is not allowed by Access-Control-Allow-Methods in preflight response. 

而且，

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined 
    at eval (RatesEdit.vue?5784:221) 

請給我一個更好的解決方案，解決了我的問題..我能夠做編輯，但無法通過單擊保存按鈕更新編輯的值。

Answer 1

更改其餘api的put函數到get（並更新您的route.php（如果我認爲它的laravel服務器正確））。

我遇到過類似的問題..我強烈建議你用只使用get和post的方法休息api。

我希望它能幫助你。

UPDATE：

改變這一點：

Route::resource('Rates', 'RatesController'); 

此：

Route::get('Rates/{id}/edit', 'RatesController@update'); 

，你調用一個得到休息方法到服務器的問題，不能映射你的get調用到服務器更新功能。