Question

如果有作业正在运行，我想禁用一个按钮。我将控制器中的按钮状态传递给视图。代码在状态为true时有效但在为false时我得到以下错误 -

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

Answer 1

对于任何使用Laravel，Vue JS和boolean的人。布尔值需要进行JSON编码才能传递给vue。

将视图更改为

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

修正了错误。

Vue JS禁用按钮aria-disable

1 个答案: