在脚本标签内使用 Axios return 对象

Question

我正在使用 API 中的数据，方法是使用 Axios 并将其返回到数组中。我可以使用简单的 v-for 访问 html 部分中的数据，但我还想访问脚本部分中的数据，这可能吗？我一直试图引用它，但我找不到正确的使用方法。

我需要数据，因为我在视图中实现了一个图表，图表的数据在脚本部分定义。

我正在 .cshtml 文件中的 MVC 6 项目中工作。我已经拥有可以从 API 访问数据并且可以通过引用模型访问的控制器功能，但是因为每个控制器方法我只能访问一个 API 端点，所以我想实现 Axios。

我用过的代码：

created() {
    axios.get('https://localhost:44332/api/clients')
    .then(response => { this.clients = response.data})
    .catch(error => {console.log(error)})}

Vue 设置：

    let app = new Vue({
    el: '#app',data() {
    return {
    clients: []
    }},

技术堆栈：带有 Axios 的 Vue 2.6、.NET 6 MVC

Answer 1

如果我没理解错的话，如果你想要来自 vue 的数据，你可以使用 $data:

let app = new Vue({
  el: '#app',
  data() {
    return {
      clients: [],
    }
  },
  async created() {
    await axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => { this.clients = response.data})
      .catch(error => {console.log(error)})
  },
})
function getData() {
  setTimeout(() => console.log('outside of vue ', app.$data.clients), 500)
}
getData()

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id='app'>
  <div v-for="(client, i) in clients" :key="i">
    {{ client }}
  </div>
</div>

在脚本标签内使用 Axios return 对象

Using Axios return object inside script tag

javascript

asp.net-mvc

vue.js

model-view-controller

axios