将 HTML 响应从公理响应转换为 Vue JS 组件Django

如何解决将 HTML 响应从公理响应转换为 Vue JS 组件Django

首先很抱歉这个长问题。由于与其他一些平台（基于测试标准）相比，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>

有人可以帮忙解决这个问题吗？

1. 如何在 Jquery AJAX 中像 JSON 一样缩短 FormData 变量？
2. 如何将 HTML 响应从公理响应转换为 Vue JS 模板？
3. 是否可以在 vue JS 中缩短 document.getElementsByName('csrfmiddlewaretoken') ？