Vue.js: initialize the data object with data from the page or from v-text directive

Question

So I'm just starting to play with Vue.js and I would like to know if there is a nice way to initialize the data object with html tags content from the page.

Basically I have a page that displays information and I would like to turn it into a tiny Vue application to avoid having a separated edit page. So I added the form with 2 way binding which submits the values via ajax.

The thing is I really want to avoid Flash Of Uncompiled Content, but then I feel like I have to duplicate all my data, once in the html tag, once in the data object.

<div id="app">
  <span v-text="prop1">This is filled by the backend</span>
  <input v-model="prop1" type="text" v-cloak />
</div>

<script>
new Vue({
    el: "#app",
    data: {prop1: "This is filled by the backend..again"}   // << Can I avoid this?
});
</script>

Could I tell Vue to get the data from the html tags since it's already there?

Thanks!

Instead of having backend dynamically generate scripts, you can put the initial json serialized data into a prop of a vue component. — Hamid Alaei
– Hamid Alaei, Commented Nov 6, 2015 at 19:43

Christophe · Accepted Answer · 2015-11-09 16:31:15Z

1

You are looking for props

Your html element would look something like <custom-element dataToPass="dataFromHtml"></custom-element>. Then you can access it in your vue instance via this.dataToPass.

Have a read through the documentation, there is a difference if you pass a string or an expression (from another vue instance for example).

In your example:

<div id="app">
      <span prop1="{ backendVariable}" v-text="prop1"></span>
      <input v-model="prop1" type="text" v-cloak />
</div>

<script>
    new Vue({
        el: "#app",
        props: ['prop1']
    });
</script>

```

edited Nov 9, 2015 at 16:31

answered Nov 9, 2015 at 16:25

Christophe

1921 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Vue.js: initialize the data object with data from the page or from v-text directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related