How to use php variable in Vue.js template literal?

Question

I am using Laravel with Vue.js. So in blade template I want to use the PHP variable in a Vue.js component template. So I have tried the below code.

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'],
    });

Now in the HTML output, the options are shown as a separate string. Not as HTML. How to fix this?

Answer 1

Vue's string interpolation (i.e., {{ topt }}) interprets the string as plain text, so the rendering will display the raw HTML.

Since you don't actually need the HTML as a data variable, you could just insert the PHP variable directly into the component's template option:

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