Question

我正在尝试设置一个向后端发出请求的vue应用程序，然后在页面上显示结果。我做了这个例子

import * as firebase from 'firebase'
import 'firebase/firestore'
import config from './config'

export const firebaseApp = firebase.initializeApp(config)
export const firestore = firebase.firestore()

和索引如：

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(\'mike@fake.com\', \'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})
        }
    }
});

这个想法是一个简单的应用程序，它应该发送用户名/密码并获得类似“成功”或其可以显示的内容。但我完全不熟悉vue和javascript，所以我陷入困境。我不知道如何让答案显示在任何地方。我有一个{{message}}，但它没有做任何事情。我所看到的只是来自Vue对象的“message”属性的{}。那些用户/通行证是硬编码的......我不确定如何使用表单字段。

我可以看到数据被发送到后端，所以我知道它正在工作......

此外，如何构建一个Vue项目，使其分解为多个“模块”或其他什么？

编辑：

如果我改变它，那么只有一个这样的组件：

<!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>

和

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})
        }
    }

})

然后根本没有任何渲染......这应该把它们放在同一个容器或其他任何东西中，对吗？

Answer 1

以下是您编辑的代码。

＆＃13;

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)
    }
  }
})

＆＃13;

<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('mike@fake.com', 'passwd')">Login</button>
</div>

＆＃13;

这是从一个组件开始的。

＆＃13;

console.clear()

Vue.component('login-component', {
  template: `
    <div>
      <button v-on:click="login('mike@fake.com', '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 }
  }
})

＆＃13;

<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>

＆＃13;

在第二个示例中，请注意message是父的数据属性;根Vue。 login-component 无法直接访问至message。在这种情况下，如果在组件中进行ajax调用，为了设置message，必须从组件中发出值。代码通过发送自定义事件login-success并将成功值作为参数传递来执行此操作。父级使用以下语法侦听该事件：

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

Answer 2

问题是您的组件login-component无法访问属于根Vue应用程序的message属性。

解决此问题的一种方法是简单地将message放到组件中：

Vue.component('login-component', {
  template: '<div><button v-on:click="login(\'mike@fake.com\', \'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和{{ 3}}）。

Vue和axios发出请求并显示结果

2 个答案: