使用 method 和 axios 在 vue 中更新数据

Question

我想在我的网络界面上显示一个图表。我想用vue js实现web界面。为此，我使用 axios 将数据从后端传递到前端。我可以在我的表面上显示一个空图。但是我传递的数据没有显示。我的代码有什么问题，我的数据没有显示在图表上。在下面你可以看到我实现的代码。

    <b-container class="ml-auto">
      <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);
            });
        },
      }, 
    };

Answer 1

如果这样定义

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

你应该这样填写：

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

使用 method 和 axios 在 vue 中更新数据

update data in vue with method and axios

html

vue.js

methods

axios