Vue JS Disable Button aria-disable

Question

Ich möchte eine Schaltfläche deaktivieren, wenn ein Job ausgeführt wird. Ich habe den Button-Status im Controller an die Ansicht übergeben. Der Code funktioniert, wenn der Zustand wahr ist, aber wenn es falsch ist ich die folgende Fehlermeldung erhalten -

[Vue warn]: Failed to generate render function: 

SyntaxError: Unexpected token } in 

Controller:

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

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

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

Ansicht

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

Answer 1

Für jeden, der Laravel, Vue JS und Booleschen. Der boolesche Wert muss JSON-codiert sein, um an vue übergeben zu werden.

Ändern der Ansicht

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

fixiert den Fehler.