有没有办法初始化保留初始HTML的Vue对象

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?

Answer 1

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> 

Answer 2

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.