前端输出字符串同名变量

这个问题其实并不像标题中的那么简单，本就是一个eval('变量同名字符串')搞定的，从头捋一下我们的需求，问题是怎么回到标题的。

原始需求是用户提交数据进行前后端验证，无论用户填写的表单是否通过了验证我们都将这些提交数据显示在表单中，如果使用模板渲染，没任何问题，大多数框架在post提交后都可以坐到将用户填写的字段渲染到对应的字段上，也就是input的value属性。

但是如果是vue呢？我们使用的是v-model数据绑定呢？如何将用户提交的数据绑定到vue的应用属性中呢？原理上我们get和post用的一个模板，但是不管是get访问还是post请求都是一次新的加载，我们如果在这次post新的加载中获取原始get提交的数据呢？

我这里的做法是post提交给后端服务器后，服务器再回传给前端模板，你当然可以在vue属性中一一去接受后端携带回来的数据，但前提是你的js代码写在了html模板中，而大多数情况下我们会将这玩意儿单独写在一个js中，这时候我们只能通过变量统一接收，再循环获取赋值来完成了。

此处以Django为例

def post(self, request):
    # 获取post数据转为普通字典
    datas = request.POST.dict()
    # 删除提交过来的csrftoken，这个不是用户填写的，也没必要传回去，当然这个前后端都可以处理
    del datas['csrfmiddlewaretoken']
    # 携带到前端模板，转为json格式，方便前端处理。
    return render(request, 'users/register.html', { 'datas':json.dumps(datas)})

我的js文件是独立的，所以在模板文件js中声明个变量来接收他吧

{% if datas %}
<script>
    var user_form_datas = {{ datas|safe }}
</script>
{% endif %}

随后在我们独立js中，vue示例创建后我们就处理这个对象

created: function(){
    	// 如果定义了user_form_datas变量，证明服务器传给我们数据了，我们就处理它
        if("undefined" != typeof user_form_datas){
            // 循环后端发来的我们原始填写的字段
            Object.keys(user_form_datas).forEach(item=>{
                // 将我们vue实例中的该条属性值赋值为后端传来的字段值，此处未处理不存在的属性
                this[item] = user_form_datas[item]
            })
        }
    },

以上代码我们post后也回填了之前的数据。