Is there a way to initialize a Vue object preserving initial HTML

Question

I want to use Vue.js to more easily manipulate the DOM but when I initialize a Vue object it rewrites initial data that is generated with backend at first before manipulating.

For example I have this markup:

<ul id="list">
  <li v-repeat="elements" v-text="content">a</li>
  <li v-repeat="elements" v-text="content">b</li>
  <li v-repeat="elements" v-text="content">c</li>
</ul>

And then I want to use new Vue({ el: '#list' }) so that it would somehow read already existing markup and preserve it before manipulating via editing $data. Is this somehow achievable?

Falco · Accepted Answer · 2017-09-22 14:04:28Z

3

I think this is not possible the way you want to do it. Vue.JS doesn't operate on the DOM directly. It reads the DOM elements, converts them into a render function and replaces the whole Element with the result of the render-function.

You should probably use JQuery to scan your DOM and fill your $data object (and possibly your template-string for Vue) and then initialie your Vue instance with this generated data.

But overall - you should rethink your application logic, because you seem to be doing something very convoluted, which could possibly be solved a lot easier. Whatever generates your DOM-Template could probably also directly render into a JS-variable, or even be accessed with an AJAX call...

If you want to render a fallback approach if the client does not support JS or the CDN for Vue is not available you can use the script-template approach. Define your Vue.JS content in a script-tag, which will replace the original DOM, when Vue is ready.

Example:

function loadVue() {
  new Vue({
    data: { values: [ 'aaa','bbb','ccc' ] },
    template: '#list-template',
    el: '#list'
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

<ul id="list">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <button onclick="loadVue()">Load Vue.JS</button>
</ul>

<script type="text/x-template" id="list-template">
<ul id="list">
  <li v-for="v in values">{{v}}</li>
</ul>
</script>

edited Sep 22, 2017 at 14:04

answered Sep 22, 2017 at 12:15

Falco

3,46627 silver badges29 bronze badges

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

2 Comments

Gherman Over a year ago

I was just thinking if I could actually keep it unobtrusive. Say js is disabled but then I still have a list pre-initialized.

Falco Over a year ago

@German I've added an example how to solve the alternate content without JS/Vue Problem you are describing.

Migwell · Accepted Answer · 2015-01-08 03:53:11Z

0

There's no reason you can't use a combination of already existing elements and a v-repeat like this

new Vue({
    el: '#list',
    data: {
        elements: [{
            content: "d (v-repeat)"
        }, {
            content: "e (v-repeat)"
        }, {
            content: "f (v-repeat)"
        }]
    }
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
<ul id="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li v-repeat="elements" v-text="content">c</li>
</ul>

You just don't put a v-repeat on the elements that are already present.

answered Jan 8, 2015 at 3:53

Migwell

20.4k24 gold badges108 silver badges182 bronze badges

1 Comment

Gherman Over a year ago

But that way a, b and c aren't accessable via the Vue. I can't delete them or change their contents. The task was to preload initial data, not just to have additional unaffected tags.

Collectives™ on Stack Overflow

Is there a way to initialize a Vue object preserving initial HTML

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related