Vuejs从本地json获取数据

Posted 2023-02-16

【中文标题】Vuejs从本地json获取数据

【英文标题】：Vuejs getting data from local json

【发布时间】：2020-07-23 16:07:12

【问题描述】：

我在本地文件中获取了一些 json 数据，该文件是 .txt 文件，并且无法直接访问数据，所以我只是将文件格式更改为 .json，之后，我尝试获取干净的数据以循环使用代码如下。

我通过在此组件中计算获取数据，但我想将此干净数据设置为子组件的道具。

我想用干净的数据创建许多子组件。

非常感谢您！

代码：

<script>
 export default 
  name: 'Dashboard',
  components : 
    'my-table': mytable,
    'my-search': search,
  ,

  data: function() 
    return 
      casesDataList: [],

    ;
  ,

  computed:
    ClearList: function()
     var casesDataList = this.casesDataList.map(function (neo)
        return ID: neo.Attributes[1].Value, Date: neo.FormattedValues[0].Value, Owner: neo.FormattedValues[1].Value;
      );
        return casesDataList;
    
  ,

  created: function()
    this.getCasesData();
  ,
  methods: 
    getCasesData() 
      fetch("Weather.json")
      .then(response => response.json())
      .then(data => (this.casesDataList = data.Entities));


    ,
  

;
</script>

【参考方案1】：

您可以将计算的作为道具直接传递给孩子：

<child :propname="ClearList"></child>

在孩子身上：

export default 
    props: ['propname'],
    // ...

【讨论】：

谢谢丹！ vuejs有什么办法可以让数据访问比我做的更简单吗？

不客气，对我来说看起来不错。一项改进可能是使用 Vuex 来管理状态。然后您可以使用全局 getter 而不是计算的，并且您不必将它作为道具传递到任何地方，因为所有组件都可以轻松地直接访问商店。