Javascript 如何将Vue数据传递到Axios Post请求？_Javascript_Vue.js_Axios

Javascript 如何将Vue数据传递到Axios Post请求？

javascript vue.js

Javascript 如何将Vue数据传递到Axios Post请求？,javascript,vue.js,axios,Javascript,Vue.js,Axios,我正在尝试将一些Vue数据传递给axios.post请求，但使用Vue模板传递数据无效。我将如何传递数据我的代码： <body> <div id="app" class="container"> <div> <input type="text" name="username" placeholder="Username" v-model="loginForm.username">

我正在尝试将一些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>


var app=新的Vue({
el:“应用程序”，
分隔符：['['，']]']，
数据：{
登录信息：{
用户名：“”，
密码：“
},
},
方法：{
登录用户（）{
axios.post（“/rest auth/login/”{
//使用delimeters如此[[foo]]，但仍然不起作用
用户名：[[loginForm.username]]，
密码：[[loginForm.password]]，
})
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
}
}
})

仅供参考[[loginForm.username]]和[[loginForm.password]]在HTML中呈现良好效果（作为文本）。

您正在将JS中的Delmitter与HTML进行融合

要访问vue中的数据属性，必须按以下步骤执行：

this.loginForm.username

此

变量是vue组件实例。您可以通过尝试在函数内部控制台log

this

来实现这一点<代码>此存储组件中声明的所有内容。计算属性、数据属性、函数（方法）等

因此，在您的情况下，您可以像这样设置键

username

的值：

{
  username: this.loginForm.username,
  password: this.loginForm.password
}

您正在将JS中的Delmitter与HTML进行融合

要访问vue中的数据属性，必须按以下步骤执行：

this.loginForm.username

此

变量是vue组件实例。您可以通过尝试在函数内部控制台log

this

来实现这一点<代码>此存储组件中声明的所有内容。计算属性、数据属性、函数（方法）等

因此，在您的情况下，您可以像这样设置键

username

的值：

{
  username: this.loginForm.username,
  password: this.loginForm.password
}

您不必在javascript中使用分隔符。仅使用模板html语法中的那些。您现在创建的是username:Array[Array['username在这里是字符串']]，换句话说：username现在是一个数组数组，第一个数组索引是用户名。您不必在javascript中使用分隔符。仅使用模板html语法中的那些。您现在创建的是username:Array[Array['username作为字符串']]，换句话说：username现在是一个数组数组，第一个数组索引是username。