Vue JS無効ボタンaria-disable

Question

ジョブが実行されている場合は、ボタンを無効にしたいと考えています。私はビューに渡されているコントローラのボタン状態を持っています。

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> 

：

[Vue warn]: Failed to generate render function: 

SyntaxError: Unexpected token } in 

コントローラ - 状態が真であるが、それが偽のとき、私は次のエラーを取得する際にコードが動作します

Answer 1

Laravelを使用している場合は、Vue JSとbooleanです。ブール値は、vueに渡すためにJSONエンコードされている必要があります。

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

にビューを変更すると、エラーを修正しました。