簡體   English   中英

為什么這個簡單的數據初始化函數在這個 vue 組件中不起作用?

[英]Why doesn't this simple data initialisation function work in this vue component?

我有一個 vue 3 組件。 相關腳本代碼如下;

<script>
/* eslint-disable */

export default {
  name: "BarExample",
  data: dataInitialisation,
  methods: {
    updateChart,
  }
};

function dataInitialisation()
{
  return {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          //categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
          categories: [1991, 1992],
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40],
        }
      ]
    };
}
</script>

上面的代碼工作正常。

但是,如果我將函數dataInitialisation()代碼修改為這個;

function dataInitialisation()
{
  init_data = {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          //categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
          categories: [1991, 1992],
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40],
        }
      ]
    };

  return init_data;
}

有了上面的功能,vue網站變成空白,沒有出現錯誤信息。 怎么了? 這兩個功能在我看來幾乎相同。

編輯:我注意到另一個奇怪的行為。 我在函數中添加了一條無意義的行x=2 ,這也導致網站空白。

function dataInitialisation()
{
  x = 2; //meaningless line caused website to go blank

  return {
      chartOptions: {
        plotOptions: {
          bar: {
            horizontal: true
          }
        },
        xaxis: {
          //categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
          categories: [1991, 1992],
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40],
        }
      ]
    };
}

我會回答我自己的問題。 感謝評論部分中的@3limin4t0r,我得到了答案。

我犯了一個菜鳥錯誤。 我忘了let在變量前面init_data javascript 中沒有錯誤消息。

function dataInitialisation() {
  let init_data = {
    chartOptions: {
      plotOptions: {
        bar: {
          horizontal: true,
        },
      },
      xaxis: {
        //categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
        categories: [1991, 1992],
      },
    },
    series: [
      {
        name: "series-1",
        data: [30, 40],
      },
    ],
  };

  return init_data;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM