从远程源获取 x 并镜像到列表

Question

目前我有这个，如果使用完整的应用程序，它将使用我选择的参数创建一个 post，但是我对 vue.js 非常陌生，我的目标是能够拥有一个此类（或其他存储方式（json 等））值的文本文件，然后让 js 脚本遍历文件并显示为卡片，因此例如在文件中我会有

"Mark", "http://google.com", "5556", "image"

或者当然使用 json 或类似的方法，我一直在做，但我的问题是，我不知道如何从远程源获取值并将其镜像到文档中，任何人都可以帮忙吗？为了清楚起见，这是我正在使用的代码片段

var app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    postList: [

    new Post(
      'Name', 
      'Link', 
      'UID', 
      'Image'), 
    ]
  },
});

-- 编辑--

我要感谢用户 Justin MacArthur 的快速回答，如果您或其他任何人不介意回答我另一个令人痛苦的无能问题。简而言之就是添加卡片的函数

var Post = function Post(title, link, author, img) {
  _classCallCheck(this, Post);
  this.title = title;
  this.link = link;
  this.author = author;
  this.img = img;
};

我现在可以从文本文件中获取数据，这意味着我可以这样做，假设我已经定义了响应（即 http 请求），它将输出文件的内容，我将如何执行此操作多张卡片-正如人们猜测的那样，每张卡片中每组四个变量中的每个变量都有一个新的 URL 不仅乏味而且效率很低。

new Post(
  response.data, 
)

Answer 1

您正在寻找的解决方案是任何可用的 AJAX 库。 Vue 曾经提倡 vue-resource，尽管它最近取消了对 Axios

的支持

您可以按照github页面上的说明安装到您的应用中，使用方法非常简单。

    // Perform a Get on a file/route
axios.get(
    'url.to.resource/path', 
    {
        params: {
            ID: 12345
        }
    }
).then(
    // Successful response received
    function (response) {
        console.log(response);
    }
).catch(
    // Error returned by the server
    function (error) {
        console.log(error);
    }
);

// Perform a Post on a file/route
// Posts don't need the 'params' object as the second argument is sent as the request body
axios.post(
    'url.to.resource/path', 
    {
        ID: 12345
    }
).then(
    // Successful response received
    function (response) {
        console.log(response);
    }
).catch(
    // Error returned by the server
    function (error) {
        console.log(error);
    }
);

显然，在捕获处理程序中，您会有错误处理代码，即页面上出现的警告或消息。在成功的情况下，您可能会得到类似 this.postList.push(new Post(response.data.name, response.data.link, response.data.uid, response.data.image));

的东西

为了使它更容易，您可以像这样将 axios 分配给 vue 原型：

Vue.prototype.$http = axios

并使用本地虚拟机实例使用它

this.$http.post("url", { data }).then(...);

编辑：对于 multi-signature 函数编辑，最好使用 arguments 关键字。在 Javascript 中，引擎定义了一个 arguments 数组，其中包含传递给函数的参数。

var Post = function Post(title, link, author, img) {
  _classCallCheck(this, Post);

  if(arguments.length == 1) {
    this.title = title.title;
    this.link = title.link;
    this.author = title.author;
    this.img = title.img;
  } else {
    this.title = title;
    this.link = link;
    this.author = author;
    this.img = img;
  }
};

注意不要改变参数列表，因为它是参数本身的引用列表，因此您可以在不知情的情况下轻松覆盖变量。

从远程源获取 x 并镜像到列表

Getting x from remote sources and mirroring on to a list

javascript

json

http

vue.js

vuejs2