javascript Vue 和 axios 发出请求并显示结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47878861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue and axios make request and display result
提问by MichaelB
I am trying to set up a vue app that makes a request to a backend and then displays the result on the page. I cooked up this example
我正在尝试设置一个向后端发出请求然后在页面上显示结果的 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(\'[email protected]\', \'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})
}
}
});
and an index like:
和一个索引，如：
<!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>
The idea being a simple app that should send a username/password and get back something like "success" or whatever that it can display. But I am completely unfamiliar with vue and javascript so I am getting stuck. I am not sure how to make the response show up anywhere. I have a {{ message }} in there but it doesn't do anything. All I see is the {} from the "message" attribute of the Vue object getting rendered in I guess. And those user/pass is hard coded... I am not sure how to make it work with a form field.
这个想法是一个简单的应用程序，它应该发送用户名/密码并返回诸如“成功”之类的内容或它可以显示的任何内容。但我完全不熟悉 vue 和 javascript，所以我被卡住了。我不确定如何使响应出现在任何地方。我在那里有一个 {{ message }} 但它没有做任何事情。我所看到的只是来自 Vue 对象的“message”属性的 {}，我猜想。那些用户/通行证是硬编码的......我不知道如何使它与表单字段一起工作。
I can see the data getting sent to the backend though so I know that's working...
我可以看到数据被发送到后端，所以我知道这是有效的......
Additionally, how can you structure a Vue project so it's broken into multiple "modules" or whatever?
此外，您如何构建 Vue 项目以便将其分解为多个“模块”或其他什么？
Edit:
编辑：
If I change it so there's only one component like so:
如果我更改它，那么只有一个组件如下：
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})
}
}
})
and
和
<div class="login-app">
{{ message }}
<button v-on:click="login(\'[email protected]\', \'passwd\')">Login</button>
</div>
Then nothing renders at all... This should have put them inside the same container or whatever, right?
然后什么都没有渲染......这应该把它们放在同一个容器中或其他什么地方，对吧？
回答by Bert
Here is your edited code working.
这是您编辑的代码工作。
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('[email protected]', 'passwd')">Login</button>
</div>Here it is working from a component.
这里它是从一个组件工作的。
console.clear()
Vue.component('login-component', {
template: `
<div>
<button v-on:click="login('[email protected]', '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>In this second example, note that messageis a data property of the parent; the root Vue. The login-componentdoes not have direct accessto message. That being the case, if the ajax call is made in the component, in order to set messagethe value has to be emitted from the component. The code does that by emitting the custom event, login-successwith the success value passed as a parameter. The parent listens for that event with the following syntax:
在第二个示例中，请注意这message是parent的数据属性；根 Vue。在login-component没有直接访问到message。在这种情况下，如果在组件中进行 ajax 调用，则message必须从组件发出值才能设置该值。代码通过发出自定义事件login-success来实现这一点，成功值作为参数传递。父级使用以下语法侦听该事件：
<login-component @login-success="onSuccess"></login-component>
回答by kevguy
The problem is your component login-componentdoesn't have access to the messageproperty, which belongs to the root Vue app.
问题是您的组件login-component无权访问message属于根 Vue 应用程序的属性。
One way to fix this is simply put the messageto the component instead:
解决此问题的一种方法是简单地将 放入message组件中：
Vue.component('login-component', {
template: '<div><button v-on:click="login(\'[email protected]\', \'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})
}
}
});
But if messageis not a property that you login-componentto have solely access to, you may have to consider Vuexor emitting custom events (thisand this).
但是，如果message不是您login-component可以单独访问的属性，您可能需要考虑Vuex或发出自定义事件（this和this）。
