Problems with SPA using components in Vue.js


I am creating a SPA website with Vue.js. Well, I have a component such that:

        props: ['productos'],

            listaLocales = this.productos;

This component is in a file called local.js

And in the HTML code I have this form that calls the method of a Vue instance:

<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">

Well, that method that runs the form called "search" is this:



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


Show results correctly returns the data through an Ajax request with Axios. And by JQuery is inserted once having the data, a tag in HTML that refers to the Vue component. The problem is that when this tag is inserted by JQuery ( $("<locales :productos=locales></locales>"); y $("#cardTwo").html(localesHtml); ), it is literally inserted, without Vue rendering or evaluating the label itself and trying to find if the component exists.

The events in Vue do not seem to solve the problem, and I can not think of how to do it so that I can dynamically insert Vue components without the latter ignoring what I insert, not evaluating the tag and therefore not replacing the tag by its corresponding Template.

asked by Sergio Gutiérrez 25.12.2018 в 16:48

1 answer


jQuery and Vue, they do not get along very well.

What I would do in your place is to create several components, with a condition to show them and pass the values by properties. But doing an $ (...). Html (...) will always work for you, unless you know what you are doing.

vue has a property that is called v-html, it helps you to add html in an element that you have in a variable.

here the doc: link


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

      return {
        texto: '<span>Hello, world!</span>

I do not understand much your code, to give you a better example, because I do not see that one thing is related to the other. but I do understand your idea, and I hope that what I'm telling you will help you out and give you a better idea of what you're doing.

answered by 25.12.2018 в 17:13