我正在尝试设置一个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})
}
}
});
和一个类似的索引：
<!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(\'[email protected]\', \'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('[email protected]', 'passwd')">Login</button>
</div>在这里，它是通过组件工作的。
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>在第二个示例中，请注意这message是父对象的数据属性；根Vue。在login-component 没有直接访问到message。就是这种情况，如果在组件中进行了ajax调用，则要设置message该值，必须从组件中发出该值。该代码通过发出自定义事件login-success并以成功值作为参数进行传递来实现此目的。父级使用以下语法侦听该事件：
<login-component @login-success="onSuccess"></login-component>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句