How to update the values in vue.js?

Question

I am in the need of edit and update the values using vue.js,

For which i have used the edit to get the values and i am able to edit but whereas i am unable to update .

Update Click button:

  <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 of Edit:

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

Update Controller:

 <?php

namespace App\Http\Controllers;

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)
  {
    //
  }
}

It was throwing the error as,

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

and also,

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

Kindly give me a better solution that solves my issue.. I am able to do edit but unable to update the edited values by clicking save button..

Answer 1

Change the rest api's put function to get (and update your route.php (if I think correctly its a laravel server)).

I met with a similar problem.. I strongly recommend you to use only get and post methods of rest api.

I hope it helps you.

UPDATE:

change this:

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

for this:

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

The problem that you call a get rest method to the server, cant map your get call to the server update function.