Obtain data from a controller in Laravel in Vue Js and interact with them.

Question

Obtain data from a controller in Laravel in Vue Js and interact with them.

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm trying to bring data from a Laravel driver to Vue JS.

   data() {
    return {
        article: undefined
    }
    },
    created() {
    this.$http.get('article/' + this.$route.params.id +  '/edit?include=category,tags')
        .then((response) => {
            this.article = response.data.data
        })
       },

The issue is that I do not want to get that data to show it in the view, I want to have that data to interact with them in the same method. More specifically, to make a layer in Leatfet of markers with the latitude and longitude fields of the Articles table.

       method(){
       getcapas(){
       //Código Leatfet
       var articles = this.$http.get('article/' + this.$route.params.id +  '/edit?include=category,tags')
        .then((response) => {
            return response.data.data
        })
        }

        //Código Leatfet con los datos de la tabla articles

When I make a console.log of the articles variable, I get the following:

Promise
[[PromiseStatus]]...
[[PromiseValue]]= array(4) /*Con todos los valores que necesito.

How could I get the data from [[PromiseValue]] in the same method?

I've been investigating but I have not found a way to get that data and I have not found anything.

laravel laravel-5 vue.js vuex

asked by Miguel Herreros Cejas 15.05.2018 в 09:33

source

2 answers

Send data from Javascript to PHP and then use Phpmyadmin Parameters in Text file

score 1 · Answer 1

Try this:

created() {
    var article;
    this.$http.get('article/' + this.$route.params.id +  '/edit?include=category,tags')
        .then((response) => {
            article = response.data.data
        });
    console.log(article);

},

Trying to assign this.article within get will not access the properties of your data, so I create a variable in the same scope as the get and assign it the value within then

score 0 · Answer 2

In the end I chose to paint the markers within the promise, although I do not think it is very good practice.

    this.$http.get('articlesmap')
    .then((response) => {
      var articles = response.data.data


      articles.forEach((feature) => {
      console.log(feature);
      var coords = [feature.longitude,feature.latitude]
      L.marker(coords).bindPopup("<a href='http://localhost:8000/articles/"+feature.slug+"'>"+feature.title+"</a>").addTo(map);
      });

    });