Problems with SPA using components in Vue.js

Question

Problems with SPA using components in Vue.js

Navigation

#1 by (0 votes)

0

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

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

        data(){
            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">
</form>

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

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); 

        },

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.

jquery html vue.js

asked by Sergio Gutiérrez 25.12.2018 в 16:48

source

1 answer

[JS / NODEJS] Error declaring a variable within a try catch block RewriteRule returns empty in re-writing htaccess

score 0 · Answer 1

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

example

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

    data(){
      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.