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

我正在将Laravel与Vue.js一起使用。所以在blade模板中，我想在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'],
    });

Vue.component（'add-edit-card'{
数据：函数（）{
返回{
topt:`{！！$types！！}`
}
},
模板：`
挑选
@{{topt}}
`
,
道具：['value']，
});

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

Vue（即，

{{topt}}

）将字符串解释为纯文本，因此渲染将显示原始HTML

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

模板

选项：

Vue.component（'add-edit-card'{
模板：`
挑选
{！！$types！！}