javascript - 如何在vue组件中导入js文件？

Question

我正在尝试将结果（json）导入 vue 组件但不工作？

结果：

[{"id":"d023c5e3-ca3c-4d97-933a-1112a8516eee",
"score":9001,
"updated":"2018-12-07T13:48:33.6366278",
"player":Johanna,
"category":Funny},
{"id":"398b65fb-e741-4801-be49-926b111ec871",
"score":99,
"updated":"2018-12-11T11:13:42.8312936",
"player":Johanna,
"category":Music}]

在 GetResult.js 中

import axios from 'axios'
const url = 'http://localhost:5000/api/Results';

export default {
  data () {
    return {
      results: {}
    }
  },
  created () {
    axios.get(url)
     .then(response => {
     console.log(response.data)
     this.$data.results = response.data
   })
  .catch(err => {
    console.log(err)
  })
}
}

在 Toplist.vue

<template>
  <div class="TopList">
   <table class="table table-striped">
    <thead>
      <tr>
      <th>Name</th>
      <th>Score</th>
      <th>category</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="result in resultList" :key="result.id">
      <td>{{ result.player }}</td>
      <td>{{ result.score }}</td>
      <td>{{ result.category }}</td>
    </tr>
  </tbody>
</table>
</div>

<script>
import results from './ResultApi/GetResult.js'

export default {
  name: 'TopList', 
  data() {
    return {
     resultList: results
   }
 }
}
</script>

标签： javascriptjsonvue.js

Answer 1

顶级列表.vue

// Ignoring the HTML part

<script>
export default {
  name: 'TopList', 
  data() {
    return {
      results: []
    }
  },
  mounted () {
    this.getResults()
  },
  methods: { 
    getResults () {
      axios.get(url)
        .then(response => this.results = response.data)
        .catch(err => console.error(err))
    }
  }
}
</script>

您的案例的示例答案。