1

que tal tengo un problema utilizando Vue con ionic y es que hago una consulta para llenar un array, sin embargo a la hora de mostrarlo en el template no aparece, pero después de unas milésimas de segundos si lo imprime en consola

el código lo dejo aquí para que chequen

 template: `
    <div>

      {{array_tour.title}}

    </div>
      `,
  data() {

    return {

      array_tour: [],

    };
  },
  computed: {

  },
  created: function () {
    axios.get('https://jsonplaceholder.typicode.com/todos/1')
      .then(function (response) {
        this.array_tour = response.data
        console.log(this.array_tour)

      })
      .catch(function (error) {

      });
  },
3
  • 2
    Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Podrias mostrarnos que aparece en la consola?
    – gbianchi
    Commented el 24 jul. 2019 a las 19:36
  • Lo estas declarando como array y al momento de crearse no existe ese valor array_tour.title, puedes crear un objeto con datos vacíos Commented el 24 jul. 2019 a las 19:41
  • que tal, si recupero los datos de la petición, sin embargo después de un momento ya lo imprime en consola pero no en la vista, aquí esta lo que me trae enlace, también cree un jsfiddle por si gustan ver jsfiddle.net/Rhazhy/9q5e4bz7/8
    – lurhzz
    Commented el 24 jul. 2019 a las 19:54

1 respuesta 1

1

Checa la variable _this, con esta tienes acceso al alcance de tus datos, y puedes usarla en la función de la respuesta. Un this en la función de respuesta no tendría el mismo alcance. Espero te sirva.

var DetalleBuscador = {

  props: {
    url_ext: {
      type: String,
      required: true,
    }
  },

  template: `
    <div>
    hellosssss
      {{array_tour.title}}

    </div>
      `,
  data() {

    return {

      array_tour: [{
      
      }],

    };
  },
  computed: {

  },
  created: function () {
  	var _this=this;
    axios.get('https://jsonplaceholder.typicode.com/todos/1')
      .then(function (response) {
        _this.array_tour = response.data
        console.log(_this.array_tour)

      })
      .catch(function (error) {

      });
  },
  methods: {

  },
  mounted: function () {
    
  },

};
Vue.customElement('detalle-buscador', DetalleBuscador);

1
  • gracias, si me funciono
    – lurhzz
    Commented el 25 jul. 2019 a las 21:30

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.