2
バックエンドにリクエストして結果をページに表示するvueアプリケーションを設定しようとしています。私は、この例VueとAxiosがリクエストして結果を表示します
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に全く慣れていないので、私は立ち往生しています。私はどのように応答をどこに表示させるかわかりません。私はそこに{{メッセージ}}を持っていますが、何もしません。表示されるのは、Vueオブジェクトの「メッセージ」属性の{}がレンダリングされていることです。これらのユーザー/パスはハードコードされています...私はフォームフィールドで動作させる方法がわかりません。
私はので、私はそれはそれは、複数の「モジュール」または任意に分けていますので、どのように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>
...これは、それらを入れている必要があります同じコンテナの中にあっても、何でも構いません。
は 'message'では、あなたのルートVueの中で宣言されたデータのプロパティですが、あなたは持っていないコンポーネントからそれを設定しようとしていますそれに直接アクセスできます。通常、子コンポーネントから値を変更する場合は、その値を親に送信する必要があります。 – Bert
私はそれが何を意味するのか分かりません...しかし私はちょっと私の質問を編集しました – MichaelB