Vuejs从本地json获取数据答案

【问题标题】：Vuejs getting data from local jsonVuejs从本地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>

【问题讨论】：

标签： json vue.js vuejs2 vue-component vue-props

【解决方案1】：

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

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

在孩子身上：

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

【讨论】：

谢谢丹！ vuejs有什么办法可以让数据访问比我做的更简单吗？
不客气，对我来说看起来不错。一项改进可能是使用 Vuex 来管理状态。然后您可以使用全局 getter 而不是计算的，并且您不必将它作为道具传递到任何地方，因为所有组件都可以轻松地直接访问商店。