vue传值写法

遇到的一个小问题,记录下
在学习vue,向后端发送数据的时候,需要根据发送数据的不同,来决定发送写法
新增:目前在做的项目中,新增,只是给后端传了一个id过去了,所以前端写法是:

this.axios.post(`http://127.0.0.1:8000/api/cart/store`, {product_id: product_id})
.then((res) => {this.$router.push({name: 'index'})

后端路由:
Route::post('store', 'CartController@store');
后端控制器对应的用Request接收,

public function store(Request $request){}

删除写法略有不同,前端为:

this.axios.delete(`http://127.0.0.1:8000/api/cart/destroy/${id}`)
.then((res) => {this.init()})

后端路由:
Route::delete('destroy/{id}', 'CartController@destroy');
后端控制器

public function destroy($id)
    {
      Cart::destroy($id);
      return Cart::cart_count();
    }

状态切换前端模版写法:

<div class="xm-input-number">
    <div class="input-sub" @click="change_num(cart,'dec')"
           :class="{active:cart.num >1}"></div>
    <div class="input-num"><span>{{cart.num}}</span></div>
    <div class="input-add active"@click="change_num(cart,'add')"></div>
</div>

两个小点需要注意:

@click="change_num(cart,'dec')方法后面是带参数的,cart是值,dec是type;
:class="{active:cart.num >1}"当cart.num >1的时候,class="active"才生效;
前端路由:

change_num(cart, type) {
       var data = {
          id: cart.id,
           type: type
          }
       if (type == 'dec' && cart.num == 1) {return false}
       this.axios.patch('http://127.0.0.1:8000/api/cart/change_num', data)
            .then((res) => {this.init()})}

data是封装了需要传给后端的id和type,
后端路由:
Route::patch('change_num', 'CartController@change_num');
后端控制器:

public function change_num(Request $request)
    {
      if ($request->type == 'add') {
        Cart::where('id', $request->id)->increment('num');
    } elseif ($request->type == 'dec') {
        Cart::where('id', $request->id)->decrement('num');
    }
      return Cart::cart_count();
    }

vue传值写法

推荐阅读更多精彩内容