Vue JS禁用按鈕aria禁用

我想讓一個按鈕被禁用，如果有作業正在運行。我將控制器中的按鈕狀態傳遞給視圖。代碼工作時的狀態是真實的，但是當它是假的，我得到以下錯誤 -Vue JS禁用按鈕aria禁用

[Vue warn]: Failed to generate render function: 

SyntaxError: Unexpected token } in

控制器：

public function index() 
    { 
     $orders = Order::orderBy('order_created', 'asc')->get(); 

     $buttonState = Sync::where('status', 'running')->exists(); 

     return view('orders.index', compact('orders', 'buttonState')); 
    }

查看

<sync-button :active="{{ $buttonState }}"></sync-button>

Vue的JS

<template> 
    <button class="btn btn-primary" style="margin:5px;" 
    :disabled="disabledComputedProp" :aria-disabled="disabledComputedProp" 
    @click="sync">Sync Orders</button> 
</template> 

<script> 
    export default { 
     props: ['active'], 
     computed: { 
      disabledComputedProp() { 
       return this.active ? true : false; 
      } 
     }, 
     methods: { 
      sync() { 
       this.active = ! this.active; 

      } 
     } 
    } 
</script>

來源

2017-10-07 rbur0425

「布爾」或「字符串」是道具「主動」的值是什麼？ –

它是boolen類型... $ buttonState是true或false布爾值 – rbur0425

嘗試將'active''props'的值指向您需要綁定的屬性。我認爲不需要設置它的計算屬性 –

對於任何使用Laravel的人，Vue JS和布爾的。布爾值需要被JSON編碼傳遞給vue。

更改視圖

<sync-button :active="{{ json_encode($buttonState) }}"></sync-button>

固定的誤差。

來源

2017-10-07 13:45:32 rbur0425

Vue JS禁用按鈕aria禁用

回答

相關問題