vue.js - Vue - 使用 Axios 填充表-6ren

vue.js - Vue - 使用 Axios 填充表

转载作者：行者123 更新时间：2023-12-03 08:54:33

27

4

我正在尝试使用 axios 和 vue 填充表，如下所示:

    <div class="container  h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <table class="table table-striped table-bordered table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>#</th>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users">
                        <td>{{user.name}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.phone}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3244475772001c041c0302" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var users;
    axios.get('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
            users = response['data'];
        })
        .catch(function (error) {
            console.log(error);
        })
</script>

问题是 {{user.name}} 返回 '{{user.name}}' ，不显示真实数据。有人知道如何使用 vue 在表格中显示数组数据吗？

更新

我使用此代码进行了更新，但 View 仍然为空。如果我在脚本中返回 this.users，则返回一个带有值的对象。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <title>Tabla</title>
        <style>
            body,
            html {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="tabla">
            <div class="container  h-100">
                <div class="row h-100 justify-content-center align-items-center">
                    <table class="table table-striped table-bordered table-hover text-center">
                        <thead class="thead-dark">
                            <tr>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Email</th>
                                <th>Phone</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="user in users">
                                <td>{{user.name}}</td>
                                <td>{{user.username}}</td>
                                <td>{{user.email}}</td>
                                <td>{{user.phone}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0274776742302c342c3332" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#tabla',
            data: {
                users: [],
            },
            created: function () {
                this.load();
            },
            methods: {
                load: function () {
                    axios
                        .get('https://jsonplaceholder.typicode.com/users')
                        .then(function (response) {
                            this.users = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            }
        })
    </script>

</html>

最佳答案

更新

问题出在 axios api 回调中的 this。

这不是解释这个的正确地方。

在简单的上下文中 - this 是 function 所属的对象。在您的情况下， this 获取 window 对象，因为您使用的 function 不是 lexically 范围的。要使其具有词法作用域，请使用ES6 Arrow fn

new Vue({
  el: "#app",
  data() {
    return {
        users: []
    }
  },
  mounted: function() {
      axios
        .get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.data
        })
        .catch(function (error) {
          console.log(error);
        })
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">

  <table>
      <thead class="thead-dark">
                    <tr>
                        <th>#</th>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users" :key="user.email">
                        <td>{{user.name}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.phone}}</td>
                    </tr>
                </tbody>
  </table>
</div>

您需要创建将您的 html 绑定(bind)到它的 vue 实例。

假设您有 html，其中有一个 id = app

<div id="app">
  {{ message }}
</div>

现在如果你想让这段html使用vue，你需要绑定(bind)它。

var app = new Vue({
  el: '#app', // This property el binds the container #app
  data: {
    message: 'Hello Vue!' // here you create your data values you want to use
  }
})

但是我建议您在使用之前先阅读 vue 很棒的文档 - Vue JS

关于vue.js - Vue - 使用 Axios 填充表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56628157/

27

4

0

文章推荐： python - 如何读取/解析目录中的所有 yaml 文件？

文章推荐： php - 错误的T-SQL查询时sqlsrv_query不会返回false

文章推荐： error-handling - for()循环中的错误处理

文章推荐： java - Spring Boot - Thymeleaf 和 Json 模板

axios - 如何停止拦截器内的 axios 响应传播
我有一个 axios 拦截器，我在其中捕获 401 错误并将用户重定向到登录页面。问题是在 window.location 运行之后和实际重定向之前 - axios 操作继续到原始调用者。我想停止进程
axios - Nuxt Axios 模块读取状态码
我正在调用一个返回至少 2 个成功状态代码的 Rest API。正常的 200 OK 和 202 Accepted 状态代码。两者都在正文中返回一个内容。如果我在 postman 中执行我的电话
axios - 如何从 Axios 获取响应时间
任何人都可以提出任何从 Axios 获得响应时间的方法吗？我找到了 axios-timing，但我真的不喜欢它(有争议，我知道)。我只是想知道是否有人找到了一些记录响应时间的好方法。最佳答案您可以
axios - 使用默认方法创建 axios 实例？
我正在尝试使用 axios.create() 创建一个 axios 实例但似乎无法弄清楚如何在实例上设置默认方法。不工作 export default axios.create({ requ
axios - 如何在代码中的一个位置记录所有 axios 调用
我正在将 axios 用于 React 应用程序，并且我想记录我在应用程序中任何位置进行的所有 axios 调用。我已经通过 create 函数使用了 axios 的单个全局实例，并且我能够记录通用的
axios - NestJS:使用基于 axios 的客户端的端到端测试未按预期工作
我有一个公开一些端点的 NestJS 应用程序，我已经编写了一个客户端应用程序，我计划将其作为 NPM 包发布以与 nest 服务器一起使用。我正在尝试编写启动 nest 服务器的端到端测试，将其连接
axios - 将图片从数据 url 上传到 Axios？
我一直在使用这个将图像文件上传到 API (Graphcool)，并且一切正常: fileUpload(file) { let data = new FormData();
javascript - Axios:对多个 axios 实例使用相同的拦截器
在我的代码库中有使用创建的各种 Axios 实例 axios.create() 因为我的应用程序中使用了多个基本 URL。所以每个 baseURL 我们都创建了一个对应的 Axios 实例。现在在
mocking - 使用 axios 构造函数时模拟 axios
我有一个 API 实用程序函数，它使用构造函数符号调用 axios: axios({ method, url: `${BASE_URL}/${url}`, data }); 我想用
mocking - 使用 axios 拦截器模拟 axios
我正在尝试使用 mockAxios 来测试 axios 拦截器。 export default { get: jest.fn(() => Promise.resolve({ data: {}
axios - 什么是 axios 取消 token ？
https://github.com/axios/axios#cancellation 我正在研究如何取消上传 PUT 请求并在文档中遇到了这一部分。为什么需要 token 才能取消？简单来说流程或过
axios - 如何在 axios PUT 请求中传递参数？
axios.put('http://localhost:3000/api/userDatas/findUserAddProp',{ params: { userId: "5bb
javascript - axios 请求立即开始，无需等待 axios.all
我的 axios promise 没有按预期工作。我猜执行是在 forEach 循环内开始的。我希望 axios 执行仅在 batch.commit 之后开始 aMobileNumbers.forEa
javascript - async + axios 还是只是 axios，这就是问题所在
有区别吗 useEffect(()=>{ async function fetchData(){ await axios .get(path, config) .t
reactjs - 在另一个 axios 请求中使用 axios 响应数据
我正在使用 axios 获取信息，并且我需要在不同 axios 响应的另一个处理程序中使用该信息。我似乎无法在第二个响应处理中使用第一个响应中加载的数据。例如: const [firstData,
reactjs - 在 axios 的所有实例中使用的 axios 中间件
我在我的 React 应用程序中使用 axios，在我的许多脚本中使用 import axios from 'axios 。我想使用一种为所有 axios 调用/错误调用的中间件。我该如何处理这个问题
javascript - Axios/Vue - 防止 axios.all() 继续执行
在我的应用程序中，为了对用户进行身份验证，我调用了 fetchData 函数。如果用户 token 无效，应用程序将运行 axios.all()，我的拦截器将返回大量错误。如何防止 axios.al
axios - 使用 axios POST 请求传递 header
我已经按照 npm 包文档中的建议编写了一个 Axios POST 请求，例如: var data = { 'key1': 'val1', 'key2': 'val2' } axios
vue.js - axios 和 vue-axios 有什么区别？
谁能提供有关 axios 和 vue-axios 之间区别的详细信息？我们需要使用哪一个？两者都需要使用api吗？谢谢最佳答案 vue-axios 只是一个包装器，将 axios 暴露给组件作为
axios - 带有 Axios 和 Loopback 的 "where"过滤器中的变量
我在向 Loopback(v3) API 发出的 Axios 请求中使用变量时遇到了麻烦。什么有效？如果我使用“REST 表示法”，它运行良好: getInfo() { axios.get(

首页

博学

6Ren·AI

商城

vue.js - Vue - 使用 Axios 填充表