我正在尝试设置一个 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(\'<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f19c989a94b197909a94df929e9c" rel="noreferrer noopener nofollow">[email protected]</a>\', \'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(\'mik<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aacfeacccbc1cf84c9c5c7" rel="noreferrer noopener nofollow">[email protected]</a>\', \'passwd\')">Login</button>
</div>
那么根本就没有任何渲染...这应该将它们放在同一个容器或其他容器中，对吗？
最佳答案
这是您编辑后的代码。
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('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761b1f1d133610171d135815191b" rel="noreferrer noopener nofollow">[email protected]</a>', 'passwd')">Login</button>
</div>这里它是在一个组件中工作的。
console.clear()
Vue.component('login-component', {
template: `
<div>
<button v-on:click="login('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfd2d6d4daffd9ded4da91dcd0d2" rel="noreferrer noopener nofollow">[email protected]</a>', '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. 登录组件 无法直接访问消息。在这种情况下，如果在组件中进行ajax调用，为了设置消息，必须从组件发出该值。该代码通过发出自定义事件 login-success 并将成功值作为参数传递来实现此目的。父级使用以下语法监听该事件:
<login-component @login-success="onSuccess"></login-component>
关于javascript - vue和axios发出请求并显示结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47878861/