update data in vue with method and axios-CodePudding

I want to display a graph on my web interface. I want to implement the web interface with vue js. For this I pass data from my backend to my frontend with axios. I can display an empty graph on my rsurface. But the data I pass is not displayed. What is wrong with my code that my data is not displayed on the graph. In the following you can see my implemented code.

    <b-container >
      <b-row>
        <b-col>
          <vue-plotly :data="dataA" :layout="layout" :options="options"/>
        </b-col>
      </b-row>
    </b-container>

    export default {
      components: {
        VuePlotly,
      },
      data() {
        return {
          dataA: [{
            x: [],
            y: [],
          }],
          layout: {
            title: 'ScreePlot',
            bargap: 0.05,
            xaxis: {
              range: [0, 9],
              title: 'x',
              tick0: 0,
              dtick: 1,
            },
            yaxis: {
              range: [0, 2000],
              title: 'y',
              tick0: 0,
              dtick: 1,
            },
          },
          options: {
            displayModeBar: false,
            responsive: true,
            watchShallow: true,
            autoResize: true,
          },
        };
      },
     mounted() {
        this.getScreePlot();
      },
      methods: {
        getScreePlot() {
          const path = 'http://localhost:5000/Diagramm';
          axios.get(path)
            .then((res) => {
              this.dataA.x = res.data.x;
              this.dataA.y = res.data.y;
            })
            .catch((error) => {
              // eslint-disable-next-line
              console.error(error);
            });
        },
      }, 
    };

CodePudding user response：

In case this definition

  dataA: [{
            x: [],
            y: [],
          }],

You should fill like this:

            .then((res) => {
              this.dataA.push( 
                {
                  x: res.data.x,
                  y: res.data.y
                }) ;
            })