如何使用/新数据启动 Vue Js 页面元素的刷新？答案

【问题标题】：How to initiate refresh of Vuejs page elements w/ new data?如何使用/新数据启动 Vue Js 页面元素的刷新？
【发布时间】：2018-07-08 18:58:06
【问题描述】：

我有一个使用 vue-router 和以下路由的 vuejs 应用程序。

const routes = [
  { path: '/list', component: list, alias: '/' },
  { path: '/resources/:id?', component: resources },
  { path: '/emails', component: emails },
  { path: '/list/:id', component: editHousehold, props: true },
  { path: '/list/turn-off/:id', component: editHousehold, props: true }
]

页面第一次加载启动事件时调用 /resources 不带“:id”并且页面加载资源列表（见下文）。

start: function () {
  this.$http.get('/resources')
    .then((res) => {
      let gdriveInfo = res.data;
      this.files = gdriveInfo.files;
    }
    );
},

资源1

资源2

救援3

...

当用户单击列表中的一个资源时，我希望调用 /resources/1 以便可以加载和显示一组不同的资源数据。

我有一个文件点击事件附加到每个资源，其中“id”附加到路径。这将调用服务器端模块，该模块将检索新数据，这些数据将替换组件中的“文件”数据，我希望这会导致 vuejs“做出反应”并更新页面的内容。

onFileClick: function (id, mimeType, event) {
  const _this = this;
  this.$http.get('/resources/' + id)
    .then((res) => {
      let gdriveInfo = res.data;
      this.files = gdriveInfo.files;
    }
    );
}

但是，上面的调用不会启动对服务器模块的调用。

this.$http.get('/resources/' + id)

我也试过了

this.$router.push('/resources/' + id)

这不起作用。

作为 vuejs 的新手，任何有关如何实现此功能的帮助将不胜感激。

【问题讨论】：

为了澄清，onFileClick 事件被调用，但是 this.$http.get('/resources/' + id) 什么都不做。

标签： vue.js vue-router

【解决方案1】：

你缺少host，因为this.$http.get('/resources/' + id)是u组件资源，this不是json...

【讨论】：

请详细说明您所说的“主机”是什么意思。为什么 this.$router.get('/resouces/' + id) 在执行时不发起对服务器的调用？
对不起，我看不到你的启动功能，this.$http.get('/resources') 方向不是你的路由器，你的组件资源返回的是json？

【解决方案2】：

您似乎没有正确进行 REST 调用。我认为您正在混淆路由和 REST 调用。您上面显示的是路由不调用服务器。

你没有在这里调用服务器： this.$http.get('/resources/' + id)

这样做只是为了路由：
this.$router.push('/resources/' + id)

看看使用 axios 进行 REST 调用：
https://github.com/axios/axios

【讨论】：