如何将 PHP 变量传递给 Laravel 刀片中的 Vue 组件实例?

新手上路,请多包涵

如何将 PHP 变量的值传递给 Laravel 刀片文件中的 Vue 组件?

在我的示例中,我有一个内联模板客户端详细信息,我从 Laravel 得到这个视图,所以现在我想通过 id 附带 url /client/1 到我的 Vue 实例。

我的组件由 Laravel 加载,看起来像:

 <client-details inline-template>
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

并安装:

 Vue.component('client-details', {
    data(){
        return {
            clientId: null
        }
    },
);

我已经试过了

:clientId="{{ $client->id }"

但它不起作用。

原文由 mastercheef85 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 344
2 个回答

您必须使用 Vue 的 props 才能通过标记将属性传递给 Vue 的组件。看看下面的例子:

 <client-details inline-template client-id="{{ $client->id }}">
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

在您的 Vue 组件中:

 Vue.component('client-details', {
    props: [
        {
            name: 'clientId',
            default:0,
        }
    ]
});

现在在 Vue 组件的其他部分,您可以通过 this.clientId 访问此值。

问题详情

请注意,在 HTML 中我们用 kebab-case 写属性名称,但在 Vue 中我们用 camelCase 写它。 官方文档中的更多信息在这里

此外,您正在使用 Vue 的 v-bind:clientId="{{ $client->id }}" --- 中的简写,这意味着 Vue 会将双引号内的任何内容作为 JavaScript 表达式处理,因此在这种情况下您也可能会遇到错误。相反,您应该使用这种格式 clientId="{{ $client->id }} 不带冒号。

原文由 Mustafa Ehsan Alokozay 发布,翻译遵循 CC BY-SA 4.0 许可协议

我只是这样做了,它对我来说非常有用。使用 Laravel 5.4 和 Vue 2.x。

在我的组件中,为对象声明一个属性(props):

props: ['currentUser'],

在我实例化组件的刀片页面上:

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

请注意,在组件中,我使用 camelCase 表示 currentUser ,但由于 html 不区分大小写,因此您必须使用 kebab-case(因此,“当前用户”)。

另请注意,如果您使用刀片语法 {{ }} 那么之间的数据通过 php htmlspecialchars 运行。如果你想要未编码的数据(在这种情况下你会),那么使用 {!! !!}

原文由 Hawkeye64 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题