Vue 和 axios 发出请求并显示结果答案

【问题标题】：Vue and axios make request and display resultVue 和 axios 发出请求并显示结果
【发布时间】：2018-06-01 09:49:59
【问题描述】：

我正在尝试设置一个向后端发出请求然后在页面上显示结果的 vue 应用程序。我做了这个例子

new Vue({
    data: {
        message: '{}'
    },
    el: '.login-app',
});

Vue.component('message-section', {
    template: '<div>Message Section</div>'
});

Vue.component('login-component', {
    template: '<div><button v-on:click="login(\'mike@fake.com\', \'passwd\')">Login</button></div>',
    methods: {
        login: function (username, password) {
            axios.post("http://192.168.1.10:8080/login", {username: username, password: password})
                .then(response => {this.message = response.data})
        }
    }
});

还有一个类似的索引：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Test</title>
  </head>
  <body>
    <div class="login-app">
      {{ message }}
      <message-section></message-section>
      <login-component></login-component>
    </div>
    <script src="/static/testvue.bundle.js"></script>
  </body>
</html>

这个想法是一个简单的应用程序，它应该发送用户名/密码并返回“成功”或它可以显示的任何内容。但是我对 vue 和 javascript 完全不熟悉，所以我被卡住了。我不确定如何使响应出现在任何地方。我在那里有一个{{ message }}，但它什么也没做。我所看到的只是 Vue 对象的“message”属性中的 {}，我猜是渲染的。而且这些用户/密码是硬编码的……我不知道如何使它与表单字段一起工作。

我可以看到数据被发送到后端，所以我知道它正在工作......

此外，如何构建一个 Vue 项目，以便将其分解为多个“模块”或其他什么？

编辑：

如果我改变它，那么只有一个这样的组件：

new Vue({
    data: {
        message: '{}'
    },
    el: '.login-app',
    methods: {
        login: function (username, password) {
            axios.post("http://192.168.91.30:8080/login", {username: username, password: password})
                .then(response => {this.message = response.data})
        }
    }

})

和

<div class="login-app">
  {{ message }}
  <button v-on:click="login(\'mike@fake.com\', \'passwd\')">Login</button>
</div>

然后什么都没有渲染...这应该将它们放在同一个容器或其他什么中，对吧？

【问题讨论】：

这里的核心问题是message 是在根 Vue 中声明的数据属性，但您正试图从无法直接访问它的组件中设置它。通常，如果您想更改子组件的值，则需要将值 $emit 给父组件。
我不知道这意味着什么......但我稍微编辑了我的问题

标签： javascript vue.js vuejs2 axios

【解决方案1】：

问题是您的组件login-component 无权访问属于根Vue 应用程序的message 属性。

解决此问题的一种方法是将message 放到组件中：

Vue.component('login-component', {
  template: '<div><button v-on:click="login(\'mike@fake.com\', \'passwd\')">Login</button></div>',
  data() { 
    return { message: '' }
  },
  methods: {
    login: function (username, password) {
      axios.post("http://192.168.1.10:8080/login", {username: username, password: password})
        .then(response => {this.message = response.data})
      }
    }
});

但如果message 不是您login-component 可以单独访问的属性，您可能需要考虑Vuex 或发出自定义事件（this 和this）。

【讨论】：

【解决方案2】：

这是您编辑后的代码。

console.clear()

new Vue({
  data: {
    message: '{}'
  },
  el: '#login-app',
  methods: {
    login: function(username, password) {
      axios.post("https://httpbin.org/post", {username, password})
        .then(response => this.message = response.data.json)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>

<div id="login-app">
  {{ message }}
  <button v-on:click="login('mike@fake.com', 'passwd')">Login</button>
</div>

这里是从一个组件工作的。

console.clear()

Vue.component('login-component', {
  template: `
    <div>
      <button v-on:click="login('mike@fake.com', 'passwd')">Login</button>
    </div>`,
  methods: {
    login: function(username, password) {
      axios.post("https://httpbin.org/post", {username, password})
        .then(response => this.$emit('login-success', response.data.json))
    }
  }
});

new Vue({
  data: {
    message: '{}'
  },
  el: '#login-app',
  methods: {
    onSuccess(message) { this.message = message }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>

<div id="login-app">
  {{ message }}
  <login-component @login-success="onSuccess"></login-component>
</div>

在第二个示例中，请注意 message 是 parent 的数据属性；根 Vue。 login-component 无法直接访问 message。在这种情况下，如果在组件中进行 ajax 调用，为了设置 message，必须从组件发出值。代码通过发出自定义事件login-success 来实现这一点，并将成功值作为参数传递。父级使用以下语法侦听该事件：

<login-component @login-success="onSuccess"></login-component>

【讨论】：

在第一个示例中，您似乎从我的“编辑”内容中所做的所有更改就是将 .login-app 更改为 #login-app 并将 .json 添加到 response.data。点和哈希有什么区别？
@MichaelB 您不想在一个类上创建 Vue，因为该类可能有多个元素。这只是一个不好的做法。 #login-app 是一个 CSS 选择器，它选择 id 为 login-app 的元素。您可以放心地忽略我对 ajax 调用的更改；这些只是因为无法调用 your 服务器，所以我更新了调用以使用处理 POST 的通用站点。
因此，在第二种情况下，您要告诉父级监听一个名为 @login-success 的事件，当它听到时，运行它自己的 onSuccess 方法。然后，您从孩子“发出”登录成功事件以及 ajax 事物返回的任何参数，它们只是连接在一起。
@MichaelB 你明白了。