C'è un modo per inizializzare un oggetto Vue preservando l'HTML iniziale

Question

Voglio usare Vue.js per manipolare più facilmente il DOM ma quando inizializzo un oggetto Vue riscrive i dati iniziali che vengono generati con il backend in un primo momento prima di manipolarli.

Per esempio io ho questo 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> 

E poi voglio usare new Vue({ el: '#list' }) in modo che fosse in qualche modo leggere markup già esistente e conservarla prima di manipolare tramite la modifica $data. È in qualche modo realizzabile?

Answer 1

Penso che questo non sia possibile nel modo in cui si desidera farlo. Vue.JS non funziona direttamente sul DOM. Legge gli elementi DOM, li converte in una funzione di rendering e sostituisce l'intero elemento con il risultato della funzione di rendering.

Probabilmente dovresti usare JQuery per scansionare il tuo DOM e riempire il tuo oggetto $ data (e possibilmente la tua stringa di modello per Vue) e quindi avviare l'istanza Vue con questi dati generati.

Ma nel complesso, dovresti riconsiderare la logica dell'applicazione, perché sembra che tu stia facendo qualcosa di molto contorto, che potrebbe essere risolto molto più facilmente. Qualunque cosa generi il tuo modello DOM potrebbe anche essere direttamente renderizzato in una variabile JS, o anche accedere con una chiamata AJAX ...

Se vuoi rendere un approccio fallback se il client non supporta JS o il CDN per Vue non è disponibile è possibile utilizzare l'approccio del modello di script. Definisci il tuo contenuto Vue.JS in un tag script, che sostituirà il DOM originale, quando Vue è pronto.

Esempio:

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

Non c'è ragione per cui non è possibile utilizzare una combinazione di elementi già esistenti e un v-repeat come questo

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>

Basta non mettere un v-repeat sugli elementi che sono già presenti.