问题描述
首先很抱歉这个长问题。由于与其他一些平台(基于测试标准)相比,Vue JS 的性能非常好,并且像库一样易于集成。我通过公理响应将一些 html 渲染到一个跨度。但是按钮(在响应 html 中)单击不起作用,并且 vue js 数据也不显示。
这是我的代码
<div id="vue-app" class="container">
{%csrf_token%}
<button v-on:click="greet" class="btn btn-primary">BUTTON</button>
<span v-html="message"></span>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#vue-app",delimiters: ['[[',']]'],data: {
message: "",},methods: {
greet: function (event) {
let formData = new FormData();
formData.append('csrfmiddlewaretoken',document.getElementsByName('csrfmiddlewaretoken')[0].value);
axios({
method: 'post',url: '{% url "core:test_url" %}',data: formData
}).then(
response => (new Vue.set(this,'message',response.data))
);
}
}
});
</script>
Django 视图
class test_func4(View):
def post(self,request):
return render(request,'home/vue_js_axiom.html',{
"post_to_view": 123
})
vue_js_axiom.html
<table class="table table-striped" id="container_in_axiom">
<tr>
<td>DATA FROM DJANGO VIEW</td><td>DATA FROM VUE JS</td>
<td>ON CLICK BUTTON</td>
</tr>
<tr>
<td>{{post_to_view}}</td><td>[[vue_js_variable]]</td>
<td>
<button v-on:click="click_from_response_view" class="btn btn-warning btn-sm">ON CLICK</button>
</td>
</tr>
</table>
<script>
let container = new Vue({
el: '#container_in_axiom',data: {
vue_js_variable: "true",methods: {
click_from_response_view: function (event) {
alert("clicked from response view");
}
},});
</script>
有人可以帮忙解决这个问题吗?
- 如何在 Jquery AJAX 中像 JSON 一样缩短 FormData 变量?
- 如何将 HTML 响应从公理响应转换为 Vue JS 模板?
- 是否可以在 vue JS 中缩短 document.getElementsByName('csrfmiddlewaretoken') ?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)