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

我正在尝试将结果（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>

名称
分数
类别
{{result.player}
{{result.score}
{{result.category}

从“./ResultApi/GetResult.js”导入结果
导出默认值{
名称：'TopList'，
数据（）{
返回{
结果列表：结果
}
}
}

如果不使用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>

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>

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

名称
分数
类别
{{player}}
{{score}}
{{category}}
从“./ResultApi/getResult.js”导入getResults
导出默认值{
名称：'TopList'，
数据（）{
返回{
结果：[]
}
},
创建（）{
getResults（）。然后（{data}）=>{
this.results=数据
}).catch（错误=>{
console.log（错误）
})
}
}

具有异步功能的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>

名称
分数
类别
{{player}}
{{score}}
{{category}}
从“./ResultApi/getResult.js”导入getResults
导出默认值{
名称：'TopList'，
数据（）{
返回{
结果：[]
}
},
异步创建（）{
试一试{
让{data}=wait getResults（）
this.results=数据
}捕捉（错误）{
console.log（错误）
}
}
}

您需要从父组件获取道具 见医生

让我们看看这个例子

例如，这是父组件

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

从“/components/Toplist.vue”导入Toplist；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
结果：[]
};
},
组成部分：{
排行榜
},
安装的（）{
常量fetchedData=[
{
id:“d023c5e3-ca3c-4d97-933a-1112a8516eee”，
分数：9001，
更新：“2018-12-07T13:48:33.6366278”，
玩家：“乔安娜”，
类别：“有趣”
},
{
id:“398b65fb-e741-4801-be49-926B1111EC871”，
得分：99分，
更新：“2018-12-11T11:13:42.8312936”，
玩家：“乔安娜”，
类别：“音乐”
}
];
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>

名称
分数
类别
{{result.player}
{{result.score}
{{result.category}
导出默认值{
名称：“Toplist”，
道具：[“结果列表”]，
};

---

演示

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>

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

//忽略HTML部分
导出默认值{
名称：'TopList'，
数据（）{
返回{
结果：[]
}
},
挂载（）{
这个文件名为getResults（）
},
方法：{
获取结果（）{
获取（url）
.然后（response=>this.results=response.data）
.catch（err=>console.error（err））
}
}
}

---

您案例的示例答案。

什么不起作用？将GetResult.js中的结果导入Toplist.vue。如果我将所有代码都放在Toplist.vue中，它就会工作。我是vue新手，因此不确定您的

getResults.js

将不会返回任何内容。我建议您将这种检索数据的方法放入

Toplist.vue

谢谢，但您知道如何让getResult.js返回数据吗？谢谢，我已经这样做了，但它仍然不起作用，您知道如何让getResult.js返回数据吗？所以，您仍然希望将getResults放在外部文件中？是的，如果可能的话？

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