如何在 Vue.js 模板文字中使用 php 变量？答案

【问题标题】：How to use php variable in Vue.js template literal?如何在 Vue.js 模板文字中使用 php 变量？
【发布时间】：2021-07-31 13:18:09
【问题描述】：

我将 Laravel 与 Vue.js 一起使用。所以在刀片模板中，我想在 Vue.js 组件模板中使用 PHP 变量。所以我尝试了下面的代码。

Vue.component('add-edit-card', {
        data: function() {
            return {
                topt : `{!! $types !!}`
            }
        },
template: ` <select id="component-type" class="form-control">
                                        <option>Select</option>
                                        @{{topt}}
                                        </select>`
,
        props: ['value'],
    });

现在在 HTML 输出中，选项显示为单独的字符串。不像 HTML。如何解决这个问题？

【问题讨论】：

标签： vue.js vue-component laravel-5.7

【解决方案1】：

Vue 的string interpolation（即{{ topt }}）将字符串解释为纯文本，因此渲染将显示原始 HTML。

由于您实际上并不需要 HTML 作为数据变量，您可以直接将 PHP 变量插入组件的 template 选项：

Vue.component('add-edit-card', {
  template: `<select id="component-type" class="form-control">
               <option>Select</option>
               {!! $types !!} ?
             </select>`
});

【讨论】：