Javascript Vue.js是否可以在更新第三方JSON时自动更新视图？

我正在努力实现以下目标，但我甚至不知道使用Vue是否可行，因为我正在努力获得所需的结果：

我有一个API的端点，它在一个数组中返回许多对象

我正在Vue应用程序中成功渲染数据，但我想知道，当阵列更新为更多对象时，Vue是否可以“跟踪”，然后在视图中渲染这些对象

我正在使用

setInterval

每10分钟执行一次GET请求，新数据将正确地进入我的

data（）

中的对象，但更改不会反映在视图中

此时，我正在分别在开始和结束处将布尔值从

true

更改为

false

，以便使用

v-if

再次渲染视图

我的目标是创建一个简单的Twitter提要应用程序，它每10分钟执行一次GET请求，收集推文，将它们放入我的Vue实例中，并在视图中显示它们，而无需重新加载页面/重新呈现组件。就像一个自动推特订阅源，每10分钟不断加载新推特

这可能吗？我尝试过使用

Vue.set（）

方法，但没有任何区别

如果不可能，那么实现类似功能的最佳方法是什么

这是我的密码：

JavaScript:

new Vue({
  el: '#app',
  data: {
    items: [],
  },
  created() {
    this.load();
    setInterval(() => this.load(), 5000);
  },
  methods: {
    load() {
      axios.get('https://reqres.in/api/users?page=2')
      .then(response => {
        this.items = response.data.data;
      });
    }
  }
});

HTML

{{item.first_name}

代码笔：

---

在上面的代码中，如果通过GET请求更新了数组，则视图中不会反映出这些可能性？

是的，这是可能的。在Vue实例中设置新的被动属性的方法如下：

对于对象属性：

Vue.set（this.baseObject、key、value）

baseObject不能是Vue实例或base data（）对象，因此必须声明容器属性

对于数组条目，请使用本机数组方法：例如

Array.prototype.push（）

。 使用

Vue.set（数组、arrayIndex、newArrayElement）

不起作用

因此，您的解决方案可能会出现以下情况：

<script>
export default {
  data() {
    return {
      response: [],
    };
  },

  mounted() {
    setInterval = (() => this.getData), 600000);
  }

  methods: {
    async getData() {
      const res = await request();
      const resLength = res.data.length;
      for (let i = 0; i < resLength; i++) {
        // check if entry is already in array
        const entryExists = this.response.some((entry) => {
          return entry.id === res.data[i].id
        })
        if (!entryExists) {
          // this will make the array entries responsive, but not nested Objects
          this.response.push(res.data[i]);
          // to create nested responsive Objects you will have to set them explicitly
          // e.g. Vue.set(this.response[this.response.indexOf(res.data[i])], nestedObjectKey, res.data[i].nestedObject)
        }
      }
    }
  }
};
</script>

导出默认值{
数据（）{
返回{
答复：[]，
};
},
安装的（）{
setInterval=（（）=>this.getData），600000）；
}
方法：{
异步getData（）{
const res=等待请求（）；
const resLength=res.data.length；
for（设i=0；i{
return entry.id==res.data[i].id
})
如果（！entryExists）{
//这将使数组条目响应，但不会使嵌套对象响应
这个.response.push（res.data[i]）；
//要创建嵌套响应对象，必须显式设置它们
//例如Vue.set（this.response[this.response.indexOf（res.data[i]）），nestedObjectKey，res.data[i].nestedObject）
}
}
}
}
};

是的，这是可能的。在Vue实例中设置新的被动属性的方法如下：

对于对象属性：

Vue.set（this.baseObject、key、value）

baseObject不能是Vue实例或base data（）对象，因此必须声明容器属性

对于数组条目，请使用本机数组方法：例如

Array.prototype.push（）

。 使用

Vue.set（数组、arrayIndex、newArrayElement）

不起作用

因此，您的解决方案可能会出现以下情况：

<script>
export default {
  data() {
    return {
      response: [],
    };
  },

  mounted() {
    setInterval = (() => this.getData), 600000);
  }

  methods: {
    async getData() {
      const res = await request();
      const resLength = res.data.length;
      for (let i = 0; i < resLength; i++) {
        // check if entry is already in array
        const entryExists = this.response.some((entry) => {
          return entry.id === res.data[i].id
        })
        if (!entryExists) {
          // this will make the array entries responsive, but not nested Objects
          this.response.push(res.data[i]);
          // to create nested responsive Objects you will have to set them explicitly
          // e.g. Vue.set(this.response[this.response.indexOf(res.data[i])], nestedObjectKey, res.data[i].nestedObject)
        }
      }
    }
  }
};
</script>

导出默认值{
数据（）{
返回{
答复：[]，
};
},
安装的（）{
setInterval=（（）=>this.getData），600000）；
}
方法：{
异步getData（）{
const res=等待请求（）；
const resLength=res.data.length；
for（设i=0；i{
return entry.id==res.data[i].id
})
如果（！entryExists）{
//这将使数组条目响应，但不会使嵌套对象响应
这个.response.push（res.data[i]）；
//要创建嵌套响应对象，必须显式设置它们
//例如Vue.set（this.response[this.response.indexOf（res.data[i]）），nestedObjectKey，res.data[i].nestedObject）
}
}
}
}
};

好吧，我查看了代码笔，我知道为什么您的视图没有得到更新：api响应总是返回相同的数组

尝试返回不同的数据

---

api返回一个数组，因此

数据

定义

data（）{
返回{
数组：[]//api返回的数组
}
}

模板可能如下所示

以及更新方法

update（）{
setInterval（异步（）=>{
let resp=wait api（）
this.array=resp.data.concat（this.array）
}，十分钟）
}

好吧，我查看了代码笔，我知道为什么您的视图没有得到更新：api响应总是返回相同的数组

尝试返回不同的数据

---

api返回一个数组，因此

数据

定义

data（）{
返回{
数组：[]//api返回的数组
}
}

模板可能如下所示

以及更新方法

update（）{
setInterval（异步（）=>{
let resp=wait api（）
this.array=resp.data.concat（this.array）
}，十分钟）
}

您应该为您的问题添加一些代码。如果您的问题已被完整回答，请接受答案，以便其他人可以看到：）您应该为您的问题添加一些代码。如果您的问题已被完整回答，请接受答案，以便其他人可以看到：）谢谢您的回答，我可以想象，这将在使用axios的方式工作？如果