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

Toplist.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，请将外部代码从获取结果移至组件本身：

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

带有外部文件：

getResults.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://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

如何在Vue组件中导入js文件？

3 个答案: