将数据添加到数组时更新v-for - VueJS

时间:2017-09-08 21:15:00

标签: vue.js

我对VueJS有点新意,所以我希望得到一些帮助。我目前正在从PHP文件返回一个json对象数组。

示例:

<?php
  /*
   Returns an array similar to this:
    [
      {name: 'foo'}, 
      {name: 'bar'}, 
      {name: 'banana'}
    ]
  */

  echo json_encode(array_values($array));
?>

我将这个对象数组附加到Vue中现有的对象数组中:

axios.post('http://localhost/get_array.php').then(response => {
  // Append returned array to already existing array
  for (var i = 0; i <= response.data.length - 1; i++) {
    this.existingArray.push(response.data[i])
  }
}).catch(e => {
  console.log("Error")
})

现在我用for循环追加数据但是我想知道VueJS是否有一个内置函数可以自动执行此操作而无需使用for循环?

1 个答案:

答案 0 :(得分:2)

您可以使用 concat 返回一个新的连接数组:

axios.post('http://localhost/get_array.php')
  .then(response => {
    this.existingArray = this.existingArray.concat(response.data)
  })
  .catch(e => {
    console.log("Error")
  })

使用响应数据调用 concat 的结果更新 existingArray 会触发更新。