Vue.js access variable from method

Question

I try to fetch stocks data from an API. This data should be used to create a chart.js graph. how do I access in vue.js data to generate a chart.js line chart from the methods http(axios) call?

Is it possible to access the data directly in the mounted component or should I define a const in the section and create the variables there?

<template>
  <select v-model="selected">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>

  <div>Selected: {{ selected }}</div>
  <div>
    <canvas id="myChart"  height="200" width="650"></canvas>
  </div>
<script>


export default {
  mounted() {
    const ctx = document.getElementById("myChart");
    const myChart = new Chart(ctx, {
      type: "line",
      data: {
        labels: [prices[0].date],
        datasets: [
            {
            label: 'Dataset msft',
            data: prices[0].price
            },
            {
            label: 'Dataset google',
            data: prices[1].price
            },
        ],
      },
    });
  },
  data() {
    return {
      selected: "",
      prices: [],
      options: [
        { text: "msft", value: "msft" },
        { text: "GOOGL", value: "GOOGL" },
      ],
    };
  },
  watch: {
    selected: function () {
      this.getPrice();
    },
  },
  methods: {
    getPrice: function () {
      var this_ = this;
      axios
        .get(
          "https://site/...."
        )
        .then((response) => {
          // JSON responses are automatically parsed.
          this_.prices = response.data;
        })
    },
  },
};
</script>

see: chartjs.org/docs/latest/developers/updates.html load the chart, on mounted grab the data from the api then update the data in the chart, you want to avoid blocking the chart render before fetching the data — Lawrence Cherone
– Lawrence Cherone, Commented May 8, 2022 at 18:16

tauzN · Accepted Answer · 2022-05-08 20:15:28Z

1

Yes, you can access variables in data() from mounted().

You need to prepend variables with this. when using the Options API

ex: this.prices[0].price

answered May 8, 2022 at 20:15

tauzN

7,5072 gold badges22 silver badges23 bronze badges

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

Comments

Rohìt Jíndal · Accepted Answer · 2022-05-09 16:10:10Z

1

As you are putting watcher on selected but I did not see any changes in the selected variable in your code. As per my understanding you are making an API call to get the graph data based on the selected option.

If Yes, Instead of generating a chart in mounted you can generate it inside your getPrice() method itself based on the response. It should be :

methods: {
  getPrice: function () {
    var this_ = this;
    axios
      .get(
      "https://site/...."
    )
      .then((response) => {
      this.generateChart(response.data);
    })
  },
    generateChart(prices) {
      const ctx = document.getElementById("myChart");
      const myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: [prices[0].date],
          datasets: [
            {
              label: 'Dataset msft',
              data: prices[0].price
            },
            {
              label: 'Dataset google',
              data: prices[1].price
            }
          ]
        }
      });
    }
}

edited May 9, 2022 at 16:10

answered May 9, 2022 at 5:43

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

2 Comments

webdev09 Over a year ago

thanks for the sample, but the generateChart function does not get executed

Rohìt Jíndal Over a year ago

@webdev09 sorry there was a typo. You have to call this.generateChart(response.data);

Ilijanovic · Accepted Answer · 2022-05-09 16:44:30Z

Here, a very basic example:

<script>
export default {
  async mounted() {
    await this.$nextTick();
    const ctx = document.getElementById("myChart");
    this.chart = new Chart(ctx, {
      type: "line",
      data: {
        labels: [],
        datasets: [],
      },
    });
  },
  data() {
    return {
      selected: "",
      chart: null,
      options: [
        { text: "msft", value: "msft" },
        { text: "GOOGL", value: "GOOGL" },
      ],
    };
  },
  watch: {
    selected: function () {
      this.getPrice();
    },
  },
  methods: {
    async getPrice() {
      let { data } = await axios.get("https://site/....");
      this.chart.data.datasets = [{ label: "dummy data" , data: [2, 3, 4]}];
      this.chart.data.label = [1, 2, 3];
      this.chart.update(); //very important, always update it
    },
  },
};
</script>

You create a property called chart and save your chart to it.

Then, after you fetch your data, you can access your chart with this.chart and then you set your datasets and labels. Whenever you make an change to the chart, use this.chart.update() to update it on the browser.

If you execute this code, you should see some dummy data in the chart

Collectives™ on Stack Overflow

Vue.js access variable from method

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related