Question

我正在尝试将一些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（作为文本）很好地呈现。

Answer 1

您正在将JS中的发送器与HTML混淆。

要在vue中访问数据属性，必须执行以下操作：

this

this变量是vue组件实例。您可以通过尝试在函数内部控制台日志this来实现此目的。 username存储在组件中声明的所有内容。计算属性，数据属性，函数（方法）等...

因此，在您的情况下，您将像这样放置键{ username: this.loginForm.username, password: this.loginForm.password }的值：

"data" = []

如何将Vue数据传递到Axios发布请求中？

1 个答案: