html - 如何将 json 数据从 URL 拉到 vuejs 中的表或下拉列表中

Question

我想从 url 中提取 json 数据数组，并使用 vuejs 和 axios 使用它来填充表或下拉列表。这是我要从中提取数据的链接。我该怎么做呢？https://jsonplaceholder.typicode.com/users/1/todos。

标签： htmlvue.js

Answer 1

在您的数据对象中添加todos_users数组：

    data () {
    return {
      loading: false,
      todos: [],
      users_todos:[]
    }

您的 axios 请求应如下所示：

 axios
      .get('https://jsonplaceholder.typicode.com/users/1/todos?page=1')
      .then(response => {this.users_todos = response.data})
      .catch(error => console.log(error))
      .finally(() => this.loading = false)

最后是模板：

  <tr v-for="todo in users_todos" v-bind:key="todo">
            <td>{{ todo.userId }}</td>
            <td>{{ todo.id }}</td>
            <td>{{ todo.title }}</td>
            <td>{{ todo.completed }}</td>
              <td><a href="">Delete</a></td>
          </tr>

这codepen