No imprime en html


#1

bueno, antes que nada, buen dia
soy nuevo en vuejs, la utilizo como libreria para manejar algunos eventos
resulta que acceso a bases de datos desde axios.post, obtengo la informacion en formato json
sin embargo dentro del data: tengo dos arrays
cuando llamo al a funcion y envio a la consola el contenido de la variable se muestra corectamente pero al querer imprimirlas en el html no hay nada, incluso pinto el data en json y las variables me aparecen viacias
el metodo es el siguiente:

   created: function(){
      this.load_home();
    },
    data: {
      encabezados: [],
      registros: []
    },
    methods: {
      load_home: function(){
        axios.post(urlProcess, { vista:"conceptos", accion:"listar" })
        .then(function(response){
          this.encabezados = ['#', 'Concepto'];
          this.registros = response.data;
          console.log(this.encabezados);
          console.log(this.registros);
        });
      },

esto en la consola imprime los registros devueltos desde php y lo que se le asigna a los encabezados
sin embargo, en chrome la revisar las variables vue, estos me aparecen como array[0]

hay un ejemplo de llenar listas, ese funciono correctamente, y aunque el proceso es el mismo no funciona
alguna idea


#2

Bienvenido Sarch,

podriamos generar un pantallazo de la respuesta del Request desde el devtools del Browser?

PD: aunque no esta relacionado con el problema que describes, si estas cargando datos deberias usar axios.get, ya que POST es reservado para enviar datos al servidor.


#3

gracias por responder, los datos ya los pude imprimir, en ejemplos que en algun momento me funcionaron se declaraba de la siguiente forma:
new Vue…

en otro que encontre se declara primero la variable

var app = new vue…

y de ahi en lugar de hacer this.resgistros…
se hace app.registros = …

de esa forma ya pude imprimir los registros y lo de post es porque necesito retornar informacion por cada llamada, por get no lo he intentado pero por ahora ya funciona

gracias


#4

bueno, ya puedo imprimir, he creado dos componentes en el app.js, cada uno se visualiza dependiendo del enlace al que haga click, lo que me gustaria hacer ahora es poner ese template en un archivo aparte, para no tener todo en el mismo archivo ya que tendre 5 vistas diferentes y seria mucho html dentro del js

la pregunta es como devo hacer esos templates
como html o js??
o para eso es necesario usar webpack


#5

Puedes guardar los templates en x-template pero lo mejor seria usar Webpack.


#6

ok entonces seria en un js supongo, y por lo de no usar webpack es que solo quiero usar vue como libreria, no el framework completo, hasta ahora, ya tengo la carga dinamica de informacion en las tablas, lo que se me ha presentado ahora es abrir un modal desde vue, ya que el boton del modal esta tambien en el template, solo que no me ha funcionado lo clasico de bootstrap, data-toggle y data-target
lo hice con bulma y funciona solo que rompe con el diseño de bootstrap en algunas cosas

algun tutorial pueda consultar sobre el uso de vue solo como libreria?


#7

Vue es un framework, independientemente de como lo cargues en tu pagina. Webpack te permite crear un bundle con Vue incluido, pero lo puedes marcar como dependencia externa y cargarlo por tu cuenta, dejando en tu bundle unicamente los archivos referentes a tu projecto.

Estudia bien tu proyecto, las ventajas y desventajas de cada estrategia, y escoge una. Siempre puedes cambiar a otra.


#8

muchas gracias por las respuestas, he estado jugando un poco con vue y el envio y recepcion de los datos se hace de forma correcta, decidi cambiar de bootstrap a buefy css por el concepto de que no usa jquery directamente, es solo agregar el css y el js de la libreria en cuestion ademas de axios y vue
he revisado un ejemplo pero no consigo que funciones, es de los mas basicos pongo el codigo y el error o mas vien lo que no funciona

var userUrl=‘https://jsonplaceholder.typicode.com/users’;

new Vue({
el: ‘#main’,

data: {
  lists: []
},

created: function(){
  this.getUsers();
},

methods: {
  getUsers: function(){
    axios.get(userUrl).then(response => {
      this.lists = response.data;
      console.log(this.lists);
    });
  }
}

})
bueno pues esto funciona perfecto, obtengo la info y la puedo imprimir en cosola pero cuando hago lo siguiente

<div class=“container”>

<pre>

{{ $data | json }}

</pre>

</div>

imprime el data como si fuera texto puro, y la verdad ya no se ni que paso, todo lo tengo como en el ejemplo, incluso quite toda libreria de buefy y nada sigue lo mismo.
alguna idea?? o sugerencia


#9

Hola,

ese comportamiento es correcto, necesitaras de alguna herramienta como highlight.js para que convierta ese text plano en etiquetas html con sus correspondientes clases.


#10

muchas gracias por la respuesta, pero era un error al haber eliminado un div, no elimine la etiqueta de cierre y eso me dejo mucho codigo fuera del app, ahora lo que quiero es saber si se puede usar un template en un componente dependiendo de un titulo

Vue.component(‘content-table’, {
props: [‘titulo’,‘cols’, ‘registros’],
template:’#tabla1-template
});

eso me funciona perfecto, pero tengo que crear un componente para cada tabla diferente, lo que quisiera saber es si hay forma de cargar un template u otro dependiendo del titulo que le mande

por ejemplo si
titulo= tabla1 carga #tabla1-template
titulo= tabla2 carga #tabla2-template

es posible eso??


#11

No, pero puedes cargar subcomponentes dependiendo del mismo usando componentes dinamicos.