1

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

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for your help, Yes its laravel server, I am not getting the updated values by using get..
what is the error msg? Can you show me the route and the controller php?
Route: Route::resource('Rates', 'RatesController'); Controller was updated in above code..
It showing the error, Sorry, the page you are looking for could not be found.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.