Vue.js access variable from method-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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) => {
      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
            }
          ]
        }
      });
    }
}