Alternative binding syntax in Vue.js

Question

Question

I want to know if there is an alternative syntax to output data in Vue.js, instead of the curly braces, like the ng-bind Angular directive.

Reading the docs, it seems that Vue.js accepts only tag properties with the v-bind directive, but I want it to work with the inner html too.

Context

I want to output data using PHP and, once the page is loaded, manage it with Vue. Imagine the next situation:

We want this output:

 <div>Hello</div>

First, we output the data with php

 <div><?php echo $hello_string ?></div>

After that, we want to be able to change the content with Vue. The current syntax is;

 <div>{{ hello_string }}</div>

We can't mix the two syntaxes, so I need something like this:

<!--Ideal syntax for mixing vue and php-->
<div v-bind:innerhtml="hello_string"><?php echo $hello_string ?></div>

Thank you for your help.

pespantelis · Accepted Answer · 2015-12-21 23:15:57Z

37

You could use the v-text directive:

<div v-text="hello_string"></div>
<!-- same as -->
<div>{{ hello_string }}</div>

or the v-html:

<div v-html="html"></div>
<!-- same as -->
<div>{{{ html }}}</div>

edited Dec 21, 2015 at 23:15

answered Dec 21, 2015 at 23:08

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Serlok Over a year ago

v-html could lead to XSS attack, so you need to be careful

Jeff · Accepted Answer · 2015-12-21 22:04:12Z

0

Vue.component({
    el:'#app',
    data:function(){
        return {
            hello_string:"<?php echo json_encode($hello_string) ?>"
        };
    }
});

Then in HTML:

<div id="app><div>{{ hello_string }}</div></div>

Basically you need to use PHP to fill your javascript variables, whether you do it through AJAX or just printing out the variables like above is up to you. You probably need to encode it to JSON or at least make sure quotes are escaped. On the front end, let Vuejs manage the view rather than printing directly into it with PHP.

edited Dec 21, 2015 at 22:04

answered Dec 21, 2015 at 21:58

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Collectives™ on Stack Overflow

Alternative binding syntax in Vue.js

Question

Context

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Question

Context

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related