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.