html 获取通过VUEJS呈现的HTML内容 - Django Backend

Posted 2021-05-11

{% extends "base.html" %}
{% load crispy_forms_tags %}


{% block content %}
  <section id="ticket-list-section" class="ticket-list">
    <div class="container">
      <!-- here goes the ticket list -->
      {% include 'tickets/ticket_list_partial.html' %}
      <!-- end ticket list -->
    </div><!-- end container -->

    <!-- the modal for ticket cancellation confirm -->
        <div class="modal fade" id="modal-cancel-user-ticket">
          <div class="modal-dialog" role="document">
            <div class="modal-content" v-html="modalText">

            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    <!-- end the modal -->

  </section>

  <!-- the modal for ticket cancellation confirm -->
      <!--<div class="modal fade" id="modal-cancel-user-ticket">
        <div class="modal-dialog" role="document">
          <div class="modal-content"> -->

          <!-- </div> --> <!-- /.modal-content -->
        <!-- </div> --> <!-- /.modal-dialog -->
      <!-- </div> --> <!-- /.modal -->
  <!-- end the modal -->

{% endblock content %}

{% block javascript %}
  {{ block.super }}

  <!-- lets include VueJS on this page -->
  {# <script src="https://cdn.jsdelivr.net/npm/vue"></script> #}
  <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

  <!-- import axios third party library-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script type="text/javascript">

    var app = new Vue({
      el: '#ticket-list-section',
      delimiters: ['${', '}'],
      data: {
        message: '',
        modalText: ''
      },
      methods: {
        get_user_tickets: function () {
          return false;
        },
        get_cancel_content: function (event) {
          url = event.target.getAttribute('data-url');

          axios.get(url)
            .then(response => {
              this.modalText = response.data;
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      }
    });

  </script>
{% endblock javascript %}