在 axios 调用时，DOM 不显示 vue.js 和 laravel 中数组的更新数据

Posted 2023-02-22

【中文标题】在 axios 调用时，DOM 不显示 vue.js 和 laravel 中数组的更新数据

【英文标题】：DOM does not show updated data of array in vue.js & laravel while axios call

【发布时间】：2020-04-02 18:34:19

【问题描述】：

经过多次尝试在这里找到解决方案后，我决定发布它。

我是初学者，使用 laravel + vue.js + mysql

接近

我通过 Axios 调用获取数据并更新 vue 实例中的数据。然后我想显示这些数据并更新 DOM。我使用mounted() 来获取数据并更新数组“users”。

问题

我能够获取数据、更新数组（在控制台记录时），但是我无法在 DOM 中显示它。它不会更新。我错过了什么？

我的 vue 组件：

<template>
  <div class="container">
    <form class="form" v-on:submit.prevent="submituser">
      <div class="row">
        <label id="username">Username</label>
        <input type="text" v-model="username" name="username" />
      </div>
      <div class="row">
        <label id="password">Password</label>
        <input type="password" name="password" v-model="password" v-on:keyup="CheckPrint" />
      </div>
      <div class="row">
        <button type="submit" class="mt-2 btn btn-primary">Sign up</button>
      </div>
    </form>
    <h2>All Users</h2>
    <p>users</p>
    <ul>
      <li v-for="user in users" :key="user.name"> user.name </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default 
  data: function() 
    return 
      password: "",
      username: "",
      users: []
    ;
  ,

  mounted() 
    var vm = this;
    axios.get("api/user").then(function(response) 
      vm.users = response.data;
      console.log(vm.users, "User updated");
    );
  
;
</script>

我的 app.js 组件：

/**
 * First we will load all of this project's javascript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require("./bootstrap");

window.Vue = require("vue");

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
import Vue from "vue";
import Vuex from "vuex";
import store from "../store/store";

Vue.use(Vuex);

Vue.component("Signup", require("./components/User/Signup.vue"));

const app = new Vue(
  el: "#app",
  store
);

非常感谢您的帮助。我相信对你们大多数人来说这很容易！

【问题讨论】：

你可以使用Vue.set，这会很有帮助***.com/questions/42807888/…

你应该使用this.users = response.data;

这是我首先尝试的。它不会更新 DOM

【参考方案1】：

如果你用另一个完整的数组替换整个数组，它应该可以正常工作。

但是分析您的代码，我发现，在这种情况下，您可能不需要使用 var vm = this... 我会尝试在该响应函数中使用箭头函数并尝试仅使用 this.users = response.data 来查看它是否有效。

我想将此放在评论中，但我也是新用户。

【讨论】：

谢谢，但这是我已经尝试过的。我确实查看了 $set 函数，但是我仍然没有完全理解它，它仍然没有工作。