用 vue 替换 laravel 刀片答案

【问题标题】：Replacing laravel blade with vue用 vue 替换 laravel 刀片
【发布时间】：2019-08-02 08:40:20
【问题描述】：

我有一个现有的 laravel 刀片模板，我正在使用刀片模板中的 Vue 组件重写它。
例如，刀片模板中现有的一行是：

<button class="btn-remove" onclick="removeItem('{{ $item->id }}', this);"></button>

这引用了一个名为removeItem的php函数。
有没有办法在新的Vue组件中调用php函数或者我必须将php函数重做到javascript中？

【问题讨论】：

什么是removeItem？根据您的代码，我认为这不是“php函数”。

标签： php laravel vue.js laravel-blade

【解决方案1】：

我相信您的意思是模板引用了一个函数 removeItem，该函数在您的刀片运行的 JS 脚本中的某处定义。

如果要将整个刀片迁移到 VueJs 实例中，则需要将 Vue 组件使用的方法移动到其 ViewModel 定义中。

您还需要将来自 PHP 的任何数据作为 prop 传递或从 API 中获取，以便组件在渲染后可以访问它。

对于您的示例，组件看起来像这样（使用道具）。

Vue.component('MyComponent', {
    template:  `
        <div>
            <button class="btn-remove" @click="removeItem"></button>
        </div>
    `,
    props: {
        itemId: String
    },
    methods: {
        removeItem() {
            // Handle click event
            this.$emit('remove', this.itemId); // for example
        }
    }
})

在您的刀片文件中，您将替换为：

<MyComponent item-id="{{$item->id}}"/>

Vue 会将上面的模板替换为您在组件中指定的模板，并且 PHP“绑定”将作为文本传递到您的 HTML 中。

【讨论】：

感谢丹尼尔。 removeFromCart 的唯一实例是帐户控制器内的 php 函数：public function removeFromCart(CartRemoveFormRequest $request) { logic here}
您可能需要通过 API 端点公开它