Question

我正在尝试从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中，其中titre =“Cassoulet”，contenu =“Couper.Faire cuire ......”

这就是为什么我说似乎数组没有更新......

Answer 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/

Answer 2

Vue是被动的。

请求是异步的，因此您检查大小的代码在<{strong> then()部分之前运行。如果您将{{ results.length }}放入模板中，它会0然后4非常快，您甚至可能永远都不会看到它。

因为记录时长度为0并不意味着它没有＆＃34;已保存＆＃34;。

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

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

Answer 3

我不知道您是否有答案，但这是我的解决方案。您必须使用安装的生命周期来更新阵列：

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

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

Answer 4

与Vue合作时要记住的三件事：

使用 Vue.set（）为反应数据成员（数组/对象）分配值

对反应性数据成员使用计算属性。

在已安装的Function中使用 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

VueJS - Axios阵列未更新

4 个答案: