Как передать данные Vue в почтовый запрос Axios? - PullRequest
Новая
       1

Как передать данные Vue в почтовый запрос Axios?

0 голосов
/ 30 декабря 2018

Я пытаюсь передать некоторые данные Vue в запрос axios.post, но передача их с использованием шаблона Vue не работает.Как мне передать данные?

Мой код: 

<body>
    <div id="app" class="container">
        <div>
            <input type="text" name="username" placeholder="Username" v-model="loginForm.username">
            <input type="password" name="password" placeholder="Password" v-model="loginForm.password">
            <input type="submit" value="Login" v-on:click.prevent="loginUser()">
        </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data: {
                loginForm: {
                    username: "",
                    password: ""
                },
            },
            methods: {
                loginUser() {
                    axios.post('/rest-auth/login/', {
                            // Using delimeters so [[ foo ]] but still doent work
                            username: [[ loginForm.username ]],
                            password: [[ loginForm.password ]],
                        })
                        .then(function (response) {
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        })
    </script>
</body>

FYI [[loginForm.username]] и [[loginForm.password]] хорошо отображает в HTML (как текст).

1 Ответ

0 голосов
/ 30 декабря 2018

Вы смешиваете разделители в JS с HTML.

Чтобы получить доступ к свойствам данных в vue, вы должны сделать это следующим образом: 

this.loginForm.username

Переменная this - это vueэкземпляр компонента.Вы можете исправить это, попытавшись утешить лог this внутри своей функции.this хранит все вещи, объявленные в вашем компоненте.Вычисляемые свойства, свойства данных, функции (методы) и т. Д. *

Итак, в вашем случае вы бы сидели со значением ключа username примерно так: 

{
  username: this.loginForm.username,
  password: this.loginForm.password
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...