javascript - Error: las plantillas solo deben ser responsables de asignar el estado a la interfaz de usuario. Evite colocar etiquetas con efectos secundarios en sus plantillas, como<script>

django django-templates

Question

Estoy usando Vuejs y continúo recibiendo esta advertencia en la consola. Tampoco hay datos cargados debido a esta advertencia. Revisé el código en busca de etiquetas no deseadas pero no encontré ninguna.

¿Es esto debido al código javascript o tengo algo mal en mi html?

Aquí está mi código:

HTML

<div class="row">
    <div class="col-sm-12" style="margin-top: 20px;">
        <form class="form-inline" method="GET" action=".">
            <div class="col-sm-3" style="float: right;"><h4>Date:</h4>
                <input class="form-control" style="padding-bottom:0px;" type="text" id="datepicker" readonly="true" name="date" value="2016-06-30">
                <input type="submit" class="btn btn-primary btn-sm" value="Submit" >
            </div>

        </form>
        <div class="col-sm-2" style="float: right; margin-top:40px;">
            <button class="btn btn-info" type="button" id="csv_export">Click to Export</button>
        </div>
    </div>
    <div class="col-sm-12" style="margin:20px;">
        <table class="table table-sm table-striped table-bordered" id="absent-list">
            <thead>
                <tr>
                    <th>#</th>
                    <th style="text-align: center; font-size: 15px;">Full Name</th>
                    <th style="text-align: center; font-size: 15px;">Section</th>
                    <th style="text-align: center; font-size: 15px;">Person Called</th>
                    <th style="text-align: center; font-size: 15px;">Person Relation</th>
                    <th style="text-align: center; font-size: 15px;">Phone Number</th>
                    <th style="text-align: center; font-size: 15px;">Absent Reason</th>
                    <th style="text-align: center; font-size: 15px;">Remarks</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr v-show="loading" class="text-center">
                    <td colspan="7">
                        <i class="fa fa-spinner fa-spin fa-4x"></i>
                    </td>
                </tr>
                <tr v-for="record in absent_followback_records">

                    <td style="text-align: center; font-size: 15px;" scope="row"> {{$index + 1}}</td>
                    <td  style="text-align: center; font-size: 15px;">{{record.student_name}}</td>
                    <td  style="text-align: center; font-size: 15px;">{{record.student_section}}</td>
                    <td  style="text-align: center;">{{record.person_called}}</td>
                    <td  style="text-align: center;">{{record.person_relation}}</td>
                    <td  style="text-align: center;">{{record.phone_number}}</td>
                    <td  style="text-align: center;">{{record.absent_reason_name}}</td>
                    <td  style="text-align: center;">{{record.remarks}}</td>
                    <td  style="text-align: center;"><a href="#" v-on:click="editAbsentFollowbackRecord($index)" data-toggle="modal" data-target="#absent-followback-edit"> Edit </a></td>

                </tr>
            </tbody>
        </table>

    </div>
</div>

<script src="/static/js/jquery-ui.min.js"></script>
<script src="/static/js/jquery.plugin.min.js"></script> 
<script src="/static/js/jquery.datepick.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="/static/js/csrftoken.js"></script>
<script src="/static/js/jquery.TableCSVExport.js"></script>

<script type="text/javascript">

    var absentFollowbackListAPiUrl = "/student/api/absent/followback/list/11/";
    var absent_reason = jQuery.parseJSON(''[{"model": "studentprofile.absentreason", "pk": 1, "fields": {"created": "2016-05-08T06:09:42.410Z", "modified": "2016-05-08T06:09:42.410Z", "reason_name": "sick"}}, {"model": "studentprofile.absentreason", "pk": 2, "fields": {"created": "2016-05-08T06:09:42.416Z", "modified": "2016-05-08T06:09:42.416Z", "reason_name": "arrived late"}}, {"model": "studentprofile.absentreason", "pk": 3, "fields": {"created": "2016-05-08T06:09:42.419Z", "modified": "2016-05-08T06:09:42.419Z", "reason_name": "work at home"}}, {"model": "studentprofile.absentreason", "pk": 4, "fields": {"created": "2016-05-08T06:09:42.423Z", "modified": "2016-05-08T06:09:42.423Z", "reason_name": "public holiday"}}]'');
    var profile_value = false;

</script>
<script type="text/javascript" src="/static/js/student/student-followback.js"></script>

archivo absent-followback.js

$(function() {
    $( "#datepicker" ).datepick({dateFormat: ''yyyy-mm-dd''});
});

$(''#csv_export'').click(function (e) {
    e.preventDefault();
    $(''#absent-list'').TableCSVExport({
        delivery: ''download'',
        filename: ''absent-list('' + $( "#datepicker" ).val() + '').csv''
    });
});

var vm = new Vue({
        el: ''body'',
        data: {
            absent_followback_records: [],
            followbackRecordIndex: ''off'',
            absentReasonList: absent_reason,
            loading: false,
            currentData: {},
            profile: profile_value,
            listApiUrl: absentFollowbackListAPiUrl
        },
        methods: {
            populateData: function(api_url){
                var self = this;
                $.get(api_url, function(data){
                    self.absent_followback_records = data;
                    self.loading = false;
                });
            },
            getAbsentFollowbackRecord: function () {
                var self = this;
                self.loading = true;
                var date = $( "#datepicker" ).val();
                var api_url = self.listApiUrl + ''?date='' + date;
                self.populateData(api_url);
            },
            getProfileAbsentFollowbackRecord: function (event) {
                var self = this;
                self.loading = true;
                var expanded = $(event.target).attr(''aria-expanded'');
                if (expanded == ''false''){
                    $(event.target).html(''Hide Details'');
                    var studentId = $(event.target).attr(''studentId'');
                    var api_url = self.listApiUrl + ''?student_id='' + studentId;
                    self.populateData(api_url);
                }
                else{
                    $(event.target).html(''Show Details'');
                }
            },
            editAbsentFollowbackRecord: function (followbackRecordIndex) {
                var self = this;
                self.currentData = self.absent_followback_records[followbackRecordIndex];
                self.followbackRecordIndex = followbackRecordIndex;
            },
            updateAbsentFollowbackRecord: function (followbackRecordIndex){
                var self = this;
                var updateData = self.currentData;
                var absent_date = updateData.date;
                var student_id = updateData.student;
                var post_url = updateData.update_url;
                var person_called = updateData.person_called;
                var person_relation = updateData.person_relation;
                var phone_number = updateData.phone_number;
                var absent_reason = updateData.absent_reason;
                var remarks = updateData.remarks;
                if (person_called){
                    var data = {
                        student: parseInt(student_id),
                        date: absent_date,
                        person_called: person_called,
                        person_relation: person_relation,
                        phone_number: phone_number,
                        absent_reason: parseInt(absent_reason),
                        remarks: remarks
                    };
                    $(''#updateAbsentFollowback'').html(''<i class="fa fa-spinner fa-spin"></i> Saving'').attr(''class'', ''btn btn-primary disabled'');
                    $.ajax({
                        url: post_url,
                        type: "PUT",
                        data: JSON.stringify(data),
                        dataType: ''json'',
                        contentType: "application/json",
                        success: function(responseData) {
                            $(''#updateAbsentFollowback'').html(''Save'').attr(''class'', ''btn btn-success'');
                            if (self.profile == true){
                                api_url = self.listApiUrl + ''?student_id='' + student_id;
                                self.populateData(api_url);
                            }
                            else{
                                self.getAbsentFollowbackRecord();
                            }
                        },
                        error: function( xhr, status, errorThrown ) {
                        console.log(errorThrown);
                        }
                    });
                }
            }

        },
        ready() {
            if (this.profile != true){
                this.getAbsentFollowbackRecord();
            }
        }
    })

Answer 1

Asegúrese de tener una etiqueta de cierre en su elemento raíz. Acabo de pasar las últimas 6 horas quitando cosas sistemáticamente y sacándome el pelo. Resulta que había eliminado mi cierre en algún momento y Vue estaba interpretando

Answer 2

Creo que la respuesta está en tu pregunta título. Simplemente deshágase de todas las etiquetas <script> en la plantilla, colóquelas fuera de la plantilla.

En este caso, está utilizando el body como plantilla y está colocando scripts dentro de su plantilla ( body )

La solución fácil es cambiar el: ''body'' a el: ''#wrapper'' y editar su html para

<body>
<div id="wrapper">
...
</div>
<script ... >
<script ... >
</body>

Answer 3

Es debido a la etiqueta de script en el alcance de su aplicación. En mi caso fue debido a google captcha que estaba en mi alcance. El iframe de captcha de Google contiene una etiqueta de script

Answer 4

Puede usar la etiqueta de script de esta manera y funcionará bien. Estaba enfrentando el mismo problema cuando usé la etiqueta <script></script> sin especificar su tipo. Después de usar el atributo de tipo, Vue no me advirtió por error crítico:

<script type="application/javascript"> 
    // your code
</script>

Answer 5

un par de etiquetas de discrepancia (div, span) puede causar este error.

<div id="app">
    <div>{{ a }} </span>
</div>