我正在尝试设置一个向后端发出请求的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>
问题是你的组件login-component
无法访问属于root Vue应用程序的message
属性。
解决这个问题的一种方法是简单地将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})
}
}
});
但是如果message
不是你login-component
可以单独访问的属性,你可能不得不考虑Vuex
或发出自定义事件(this和this)。