VueJS - Axios 数组未更新

Posted 2023-02-22

【中文标题】VueJS - Axios 数组未更新

【英文标题】：VueJS - Axios array not updated

【发布时间】：2017-11-10 21:21:57

【问题描述】：

我正在尝试从 API 更新我在数据中声明的数组。当我用一个对象初始化数组时，这个对象很好地出现在 html 代码中。在 axios 调用的范围之后，该数组似乎没有“保存”。任何人都可以帮助我吗？我没有任何错误代码/消息。

var vm = new Vue(
el: '#recettes',
data: 
  results: []
,
created() 
  axios.get('url')
  .then((response) => 
    this.results = response.data
    console.log("Size before end of scope = " + this.results.length)  // = 4
  );
  console.log("Size after = " + this.results.length) // = 0

);

响应 API 是：

[
  
    "id": 1,
    "titre": "Cassoulet",
    "contenu": "Couper. Faire cuire...",
    "id_util": 1
  ,
  
    "id": 2,
    "titre": "Gateau",
    "contenu": "chocolat",
    "id_util": 4
  ,
  
    "id": 3,
    "titre": "Gateau",
    "contenu": "fraise",
    "id_util": 5
  ,
  
    "id": 4,
    "titre": "Gateau",
    "contenu": "Mélanger, cuire, four 220°...",
    "id_util": 5
  
]

模板：

    <div id="recettes">
    <div v-for="result in results">
      <div class="card">
        <div class="card-divider">
           result.titre 
        </div>
        <div class="card-section">
           result.contenu 
        </div>
      </div>
    </div>
    </div>

更新

var vm = new Vue(
  el: '#recettes',
  data: 
    results: []
,
created() 
  axios.get('URL')
  .then(response => 
    this.results = response.data
    console.log("size: " + this.results.length)
    console.log('results[0]: ' + this.results[0].titre)
  )

);

使用此代码，results[0].titre 包含正确的字符串。但在 HTML 代码中，没有显示卡片。 并使用此代码：

var vm = new Vue(
  el: '#recettes',
  data: 
    results: [
      "id" = 1, "id":1,"titre":"Cassoulet","contenu":"Couper. Faire cuire...","id_util":1
    ]
,
created() 
  axios.get('URL')
  .then(response => 
    this.results = response.data
    console.log("size: " + this.results.length)
    console.log('results[0]: ' + this.results[0].titre)
  )

);

一张卡片显示在 HTML 中，tire = "Cassoulet" 和 contenu = "Couper. Faire cuire..."

所以我才说，好像数组没有更新……

【问题讨论】：

你的模板是什么？

我添加了模板

您的模板是否在 id = recettes 的 div 中？我在您的代码中没有看到问题。 codepen.io/Kradek/pen/JJGGwy?editors=1010

你是在使用 laravel 还是使用 进行插值的东西？

@BillCriswell 是的，我不确定。还没有足够的信息:)

【参考方案1】：

您好，我认为这是一个异步问题。如您所见，javascript 不会等待另一个函数完成。试试这个。

created() 
  axios.get('url')
  .then((response) => 
    this.results = response.data
    console.log("Size before end of scope = " + this.results.length)  // = 4
    return true;
  ).then((response) => 
      console.log("Size after = " + this.results.length) // = 4
  );
  // console.log("Size after = " + this.results.length) // = 0

UPDATE1：添加小提琴

这是一个示例小提琴供您查看。 https://jsfiddle.net/khenxi/n49zj258/

【讨论】：

感谢您的帮助。 “size after”的结果还是0

添加了一个小提琴。看看

好的我去看看

【参考方案2】：

Vue 是反应式的。

请求是异步的，因此您检查大小的代码在 then() 部分之前运行。如果您在模板中输入 results.length ，它很快就会变成0，然后是4，您甚至可能永远看不到它为0。

仅仅因为当您登录时长度为0 并不意味着它没有“保存”。

如果您想要变量中的长度，您可以使用计算属性并执行以下操作：

computed: 
  resultsLength () 
    return this.results.length
  ,

【讨论】：

好的，长度正常。但不幸的是我的卡片仍然没有出现

【参考方案3】：

我不知道你是否有答案，但这是我的解决方案。你必须使用挂载的生命周期来更新你的数组：

 data() 
    return 
      headings: []
    ;
  ,
  mounted() 
    axios
      .get("url")
      .then(result => 
        console.log(result);
        this.headings = result.data;
      );
  

在异步调用之后，标题数组将具有新值。

【参考方案4】：

在使用 Vue 时要记住三件事：

使用 Vue.set() 为响应式数据成员（数组/对象）分配值 对反应性数据成员使用计算属性。 在挂载函数中使用 Vue.$nexttick() 确保 DOM 准备就绪。 在您的情况下，您应该使用 Mounted hook 而不是 Created 挂钩。

import Vue from'vue'
...
mounted() 
    Vue.$nexttick(function()
        axios
        .get('url')
        .then((response) => 

            Vue.set(this,'results',response.data)
            console.log("Size before end of scope = " + this.results.length)  // = 4
        );
        console.log("Size after = " + this.results.length) // = 0
    
,
computed: 
    //Optional
    freshResults: function() 
        return this.results
    

希望这会有所帮助。您可以参考官方文档以获取更多信息： https://vuejs.org/v2/api/#Vue-set