javascript - versiones - VueJS: cómo inicializar una plantilla de forma dinámica con el resultado de una llamada ajax

vue router

Question

Quiero cargar la template para un componente VueJS dinámicamente. Me gustaría hacer una llamada AJAX usando jQuery, y lo que devuelva el servidor debe ser la template del componente VueJS. Aquí hay una versión simplificada del código con la llamada AJAX eliminada, ya que es irrelevante de dónde provienen los datos:

BoardFeed = Vue.extend
    template: ''<div>This should be replaced</div>''
    data: ->
            return items: null
    created: ->
        @template = "<div>Template returned from server, what I really want</div>"

En el ejemplo anterior, estoy usando el gancho creado, que pensé que sería adecuado para esto, pero la plantilla más nueva nunca se representa, solo la más antigua.

¿Es posible lograr esto?

Answer 1

Puedes usar v-partial en tu plantilla. Y cuando haya cargado el parcial, puede registrarlo a través de Vue.partial() . El valor de {{ partial }} se reemplaza, por lo tanto, representa el nuevo parcial.

BoardFeed = Vue.extend
    template: ''<div v-partial="{{ partial }}">This should be replaced</div>''
    partials: {"beforeLoad": "<div>This should be replaced</div>"}
    data: ->
            return {items: null, partial: "beforeLoad"}
    created: ->
        Vue.partial("afterLoad", "<div>Template returned from server, what I really want</div>")
        @partial = "afterLoad"

(y disculpe cualquier error de escritura de café, no estoy muy familiarizado con eso)