0

Estoy creando una página web SPA con Vue.js. Bien, tengo un componente tal que así:

Vue.component("locales",
    {
        props: ['productos'],
        template:`<pre>{{productos}}</pre>`,

        data(){
            listaLocales = this.productos;
        }
    }
);

Este componente se esta en un archivo llamado local.js

Y en el código HTML tengo este formulario que llama al método de una instancia de Vue:

<form class="form form--style" v-on:submit.prevent="buscar" action="/index.html">
      <i class="fas fa-search"></i>
      <input type="text" v-model="ciudad" placeholder="Lugares.." name="search" maxlength="50" id="ciudadBuscar">
      <input type="submit" value="Buscar">
</form>

Bien, ese método que ejecuta el formulario llamado "buscar" es esto:

buscar(){
            this.mostrarResultados();
        }, 


        mostrarResultados(){

            this.locales = repo.peticionAjax('getLocales', saveData);
            let localesHtml = $("<locales :productos=locales></locales>"); // es insertado en el HTML sin pasar por Vue.js
            $("#cardTwo").html(localesHtml); 

        },

Mostrar resultados devuelve correctamente los datos a través de una petición Ajax con Axios. Y por JQuery se inserta una vez teniendo los datos, un tag en HTML que hace referencia al componente de Vue. El problema está en que cuando se inserta por JQuery dicho tag ( $("<locales :productos=locales></locales>"); y $("#cardTwo").html(localesHtml); ), es insertado literalmente, sin que Vue renderice ni evalúe la etiqueta en sí y trate de buscar si el componente existe.

Los eventos en Vue no parecen solucionar el problema, y no se me ocurre como hacerlo de forma que pueda insertar componentes en Vue dinámicamente sin que este último esté ignorando lo que inserto, no evaluando la etiqueta y por tanto, no sustituyendo el tag por su correspondiente Template.

0

1 respuesta 1

0

jQuery y Vue, no se llevan muy bien.

Yo lo que haria en tu lugar es crear varios componentes, con una condición mostrarlos y pasarle los valores por propiedades. Pero hacer un $(...).html(...) te va a funcionar siempre mal, a menos que sepas lo que estés haciendo.

vue tiene una propiedad que se llama v-html, te sirve para agregar html en un elemento que tengas en una variable.

aqui la doc: https://v2.vuejs.org/v2/guide/syntax.html

ejemplo

Vue.component( .... ,
  {
    props: [ ... ],
    template:'<div v-html="texto"></div>',

    data(){
      return {
        texto: '<span>Hello, world!</span>
      }
    }
  }
);

no entiendo mucho tu codigo, para darte un ejemplo mejor, porque no veo que una cosa se relacione con la otra. pero si entiendo tu idea, y espero que lo que te estoy comendanto te sirva de algo y te de una mejor idea de lo que estás haciendo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.