如何在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>

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>

您的案例的示例答案。

Answer 2

...
created () {
  axios.get(url).then(response => {
    console.log(response.data)
    this.$data.results = response.data // bad
    this.results = response.data // good
  })
...

如果您不使用 Vuex，請將外部代碼從 get result 移到組件本身：

<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="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'TopList',

  data() {
    return {
      url: 'http://localhost:5000/api/Results',
      results: []
    }
  },

  created () {
    axios.get(this.url).then(({ data }) => {
      this.results = data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

使用外部文件：

獲取結果.js

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

export default function () {
  axios.get(url)
}

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="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import getResults from './ResultApi/getResult.js'

export default {
  name: 'TopList',

  data() {
    return {
      results: []
    }
  },

  created () {
    getResults().then(({ data }) => {
      this.results = data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

另一個具有異步功能的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="{ id, player, score, category } in results" :key="id">
          <td>{{ player }}</td>
          <td>{{ score }}</td>
          <td>{{ category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import getResults from './ResultApi/getResult.js'

export default {
  name: 'TopList',

  data() {
    return {
      results: []
    }
  },

  async created () {
    try {
      let { data } = await getResults()
      this.results = data
    } catch(err) {
      console.log(err)
    }
  }
}
</script>

Answer 3

您需要從父組件獲取道具，請參閱文檔https://v2.vuejs.org/v2/guide/components-props.html

讓我們看看這個例子

例如這是父組件

<template>
  <div id="app"><Toplist :result-list="results" /></div>
</template>

<script>
import Toplist from "./components/Toplist.vue";

export default {
  name: "App",
  data() {
    return {
      results: []
    };
  },
  components: {
    Toplist
  },
  mounted() {
    const fetchedData = [
      {
        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"
      }
    ];

    this.results = fetchedData;
  }
};

這是子組件從道具中獲取數據

<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>
</template>

<script>
export default {
  name: "Toplist",
  props: ["resultList"],
  
};
</script>

演示https://codesandbox.io/s/n9p30vn9xm