Parse data from JS variable to Vue instance

Question

I'm new to VueJS and have a very basic question. If I have a JS variable and want to parse it into a Vue instance data section how can this be done? In my simple example below I want to parse my variale "parsedJSON" into Vue instance "mainVue" under data section in the variable called "test":

let parsedJSON = fetch(url)
    .then(function(response){
        return response.json();
    }).then(function (data){
        console.log(data)
});

let mainVue = new Vue({
    el: '#mainContent',
    data: {
        test: ""
    }
})

In my entire code the "parsedJSON" variable consist of JSON data from a mongoDB, which is fetched fine, but I cant seem to find a way to parse it into my Vue instance. The correct data is displayed in the console.

you should fetch within the vue instance, in beforeMount for example — Lawrence Cherone
– Lawrence Cherone, Commented Oct 31, 2020 at 11:44
Yeah that's what I thought. Just not sure how to do that tbh. — egx
– egx, Commented Oct 31, 2020 at 11:45

Lawrence Cherone · Accepted Answer · 2020-10-31 11:55:46Z

2

Try this, fetch within the instance:

let mainVue = new Vue({
  el: '#mainContent',
  data: function() {
    return {
        test: {}
    }
  },
  created() {
    fetch('...').then(function(response) {
      return response.json();
    }).then(function(data) {
      this.test = data;
    }.bind(this))
  }
})

or a little bit more tidier

let mainVue = new Vue({
  el: '#mainContent',
  data: () => ({
    test: {}
  }),
  async created() {
    this.test = await fetch('...').then(res => res.json())
  }
})

edited Oct 31, 2020 at 11:55

answered Oct 31, 2020 at 11:47

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

egx Over a year ago

Thank you! This worked for me. I'll look up the beforeMount, as I'm not familiar with this.

Lawrence Cherone Over a year ago

np, thanks for accept, also to tidy up the code you could use async/await and arrow funcs instead of .bind(this), depends on IE support as doesn't look like your using a transpiler

Lawrence Cherone Over a year ago

though saying that fetch is also not in IE ;p

egx Over a year ago

Thanks for the tip and the answer again. I just had a look, and seems like I can use "created" for this, instead of beforeMount, right? To call synchronously after the instance is created

Lawrence Cherone Over a year ago

also if test is an object, define it as object in data.. test: {}

|

Hannah · Accepted Answer · 2020-10-31 11:42:38Z

0

Did you try just setting it like this?

    data: {
        test: parsedJSON
    }

answered Oct 31, 2020 at 11:42

Hannah

1,1436 silver badges5 bronze badges

2 Comments

egx Over a year ago

Yes and this will work with a "normal" varialbe. The thing is, that in my parsedJSON I'm fetching data from my mongo db, and it will not let me parse it that way. I will change/update the code example above.

Hannah Over a year ago

Ah I understand now, in which case I think the other answer is correct.

Collectives™ on Stack Overflow

Parse data from JS variable to Vue instance

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related