Error: Templates should only be responsible for ma

Question

I am using Vuejs and I keep getting this warning in the console. Also no data is loaded because of this warning. I checked the code for unwanted tags but did not find any.

Is this because of the javascript code or I have something wrong in my html?

Here is my code:

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>

absent-followback.js file

$(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

You can use script tag in this way and it will work fine. I was facing the same problem when I used <script></script> tag without specifying its type. After using the type attribute Vue did not warn me for critical error:

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

Answer 2

It is because of script tag in your app scope. In my case it was because of google captcha that was in my scope. Google captcha iframe contains script tag

Answer 3

Make sure you have a closing tag on your root element. I just spent the last 6 hours systematically removing things and pulling my hair out. Turns out I had deleted my closing at some point and Vue was interpreting

Answer 4

My suggestion is a little specific, as I'm using Vue JS v2 in conjunction with jQuery v3.

I'm using jQuery to load the instance of my application with something simple like this:

$(() => {

  new Vue({
    name: 'MyApp',
    el: '#app' // which is my main HTML element for my entire page app
  });

});

So, this won't initiate until the entire document is loaded.

In my footer, I'm changing any offending script tags with this before the entire document is loaded, but after my closing main HTML tag:

$('main script:not([type="application/javascript"])').attr('type', 'application/javascript');

This did the trick for me without having to parse any output from offending tags and doing anything more extravagant.

This can be extrapolated out, using the native document selectors if you're not using jQuery, like my example.

Answer 5

a pair of mismatch tags (div, span) can cause this error.

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

Answer 6

I think the answer is in you question title. Just get rid of all the <script> tags in the template, put them outside of the template.

In this case you are using body as the template and you are putting scripts inside your template (body)

The easy solution is to change the el: 'body' to el: '#wrapper' and edit your html to

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