admin管理员组

文章数量:1303411

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

new Vue({
    data: {
        message: '{}'
    },
    el: '.login-app',
});

Vueponent('message-section', {
    template: '<div>Message Section</div>'
});

Vueponent('login-ponent', {
    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-ponent></login-ponent>
    </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 pletely 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.

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?

Edit:

If I change it so there's only one ponent 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?

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

new Vue({
    data: {
        message: '{}'
    },
    el: '.login-app',
});

Vue.ponent('message-section', {
    template: '<div>Message Section</div>'
});

Vue.ponent('login-ponent', {
    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-ponent></login-ponent>
    </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 pletely 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.

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?

Edit:

If I change it so there's only one ponent 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?

  • javascript
  • vue.js
  • vuejs2
  • axios
Share Improve this question edited Dec 19, 2017 at 2:39 MichaelB asked Dec 19, 2017 at 1:36 MichaelBMichaelB 1,1323 gold badges17 silver badges35 bronze badges 2
  • The core issue here is message is a data property declared in your root Vue, but you are attempting to set it from a ponent that doesn't have direct access to it. Typically, if you want to change the value from a child ponent, you will need to $emit the value to the parent. – Bert Commented Dec 19, 2017 at 2:31
  • I have no idea what that means... but I edited my question a bit – MichaelB Commented Dec 19, 2017 at 2:40
Add a ment  | 

2 Answers 2

Reset to default 4

Here is your edited code working.

console.clear()

new Vue({
  data: {
    message: '{}'
  },
  el: '#login-app',
  methods: {
    login: function(username, password) {
      axios.post("https://httpbin/post", {username, password})
        .then(response => this.message = response.data.json)
    }
  }
})
<script src="https://cdnjs.cloudflare./ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare./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 ponent.

console.clear()

Vue.ponent('login-ponent', {
  template: `
    <div>
      <button v-on:click="login('[email protected]', 'passwd')">Login</button>
    </div>`,
  methods: {
    login: function(username, password) {
      axios.post("https://httpbin/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./ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.11/vue.min.js"></script>

<div id="login-app">
  {{ message }}
  <login-ponent @login-success="onSuccess"></login-ponent>
</div>

In this second example, note that message is a data property of the parent; the root Vue. The login-ponent does not have direct access to message. That being the case, if the ajax call is made in the ponent, in order to set message the value has to be emitted from the ponent. The code does that by emitting the custom event, login-success with the success value passed as a parameter. The parent listens for that event with the following syntax:

<login-ponent @login-success="onSuccess"></login-ponent>

The problem is your ponent login-ponent doesn't have access to the message property, which belongs to the root Vue app.

One way to fix this is simply put the message to the ponent instead:

Vue.ponent('login-ponent', {
  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 message is not a property that you login-ponent to have solely access to, you may have to consider Vuex or emitting custom events (this and this).

本文标签： javascriptVue and axios make request and display resultStack Overflow

版权声明：本文标题：javascript - Vue and axios make request and display result - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741751677a2395869.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。