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

命名空间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)
  {
    //
  }
}

将错误抛出，

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 api的get和post方法。

我希望它可以帮到你。

<强>更新

改变这个：

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

为此：

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

您将get rest方法调用到服务器的问题，无法将您的get调用映射到服务器更新函数。

如何更新vue.js中的值？

1 个答案: