Laravel Splade复选框@change事件失效，如何触发脚本？

点击复选框时想触发提示框测试脚本，但功能未生效，相关代码如下：

<x-splade-form :default="[
    'allocated' => 0,
    'amount' => 100,
    'allocateme' => 0,
]">

    <x-splade-input label="Amount" name="amount" v-model="form.amount" />
    <x-splade-input label="Allocated" name="allocated" v-model="form.allocated" />
    <x-splade-input disabled label="Total" name="total" />
    <x-splade-checkbox @change="shout" label="Allocate this amount" name="allocateme" v-model="form.allocateme" value="1" />

</x-splade-form>

<x-splade-script>
    function shout() {
    alert('Checkbox was checked');
    }
</x-splade-script>

错误原因 #

你直接在<x-splade-script>里定义了普通函数shout，但模板中的@change="shout"无法找到这个函数——因为Splade的模板作用域绑定的是Vue组件的实例方法，而非全局函数。

解决方法 #

需要将函数注册为Vue组件的实例方法，有两种常用方式：

方式1：选项式API（Options API） #

修改<x-splade-script>内容，导出包含methods的组件对象：

<x-splade-script>
    export default {
        methods: {
            shout() {
                alert('Checkbox was checked');
            }
        }
    }
</x-splade-script>

方式2：组合式API（Composition API） #

使用defineComponent和setup函数返回需要暴露的方法：

<x-splade-script>
    import { defineComponent } from 'vue';

    export default defineComponent({
        setup() {
            const shout = () => {
                alert('Checkbox was checked');
            };

            return { shout };
        }
    });
</x-splade-script>

这样修改后，点击复选框时就能正常触发提示框了。后续你可以在shout函数里添加更新输入框的逻辑。

内容的提问来源于stack exchange，提问作者Kal-El