title: Error: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>
body: <p>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.</p>
  
  <p>Is this because of the javascript code or I have something wrong in my html?</p>
  
  <p>Here is my code:</p>
  
  <blockquote>
    <p>HTML</p>
  </blockquote>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12" style="margin-top: 20px;"&gt;
          &lt;form class="form-inline" method="GET" action="."&gt;
              &lt;div class="col-sm-3" style="float: right;"&gt;&lt;h4&gt;Date:&lt;/h4&gt;
                  &lt;input class="form-control" style="padding-bottom:0px;" type="text" id="datepicker" readonly="true" name="date" value="2016-06-30"&gt;
                  &lt;input type="submit" class="btn btn-primary btn-sm" value="Submit" &gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
          &lt;div class="col-sm-2" style="float: right; margin-top:40px;"&gt;
              &lt;button class="btn btn-info" type="button" id="csv_export"&gt;Click to Export&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12" style="margin:20px;"&gt;
          &lt;table class="table table-sm table-striped table-bordered" id="absent-list"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;#&lt;/th&gt;
                      &lt;th style="text-align: center; font-size: 15px;"&gt;Full Name&lt;/th&gt;
                      &lt;th style="text-align: center; font-size: 15px;"&gt;Section&lt;/th&gt;
                      &lt;th style="text-align: center; font-size: 15px;"&gt;Person Called&lt;/th&gt;
                      &lt;th style="text-align: center; font-size: 15px;"&gt;Person Relation&lt;/th&gt;
                      &lt;th style="text-align: center; font-size: 15px;"&gt;Phone Number&lt;/th&gt;
                      &lt;th style="text-align: center; font-size: 15px;"&gt;Absent Reason&lt;/th&gt;
                      &lt;th style="text-align: center; font-size: 15px;"&gt;Remarks&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr v-show="loading" class="text-center"&gt;
                      &lt;td colspan="7"&gt;
                          &lt;i class="fa fa-spinner fa-spin fa-4x"&gt;&lt;/i&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr v-for="record in absent_followback_records"&gt;
  
                      &lt;td style="text-align: center; font-size: 15px;" scope="row"&gt; {{$index + 1}}&lt;/td&gt;
                      &lt;td  style="text-align: center; font-size: 15px;"&gt;{{record.student_name}}&lt;/td&gt;
                      &lt;td  style="text-align: center; font-size: 15px;"&gt;{{record.student_section}}&lt;/td&gt;
                      &lt;td  style="text-align: center;"&gt;{{record.person_called}}&lt;/td&gt;
                      &lt;td  style="text-align: center;"&gt;{{record.person_relation}}&lt;/td&gt;
                      &lt;td  style="text-align: center;"&gt;{{record.phone_number}}&lt;/td&gt;
                      &lt;td  style="text-align: center;"&gt;{{record.absent_reason_name}}&lt;/td&gt;
                      &lt;td  style="text-align: center;"&gt;{{record.remarks}}&lt;/td&gt;
                      &lt;td  style="text-align: center;"&gt;&lt;a href="#" v-on:click="editAbsentFollowbackRecord($index)" data-toggle="modal" data-target="#absent-followback-edit"&gt; Edit &lt;/a&gt;&lt;/td&gt;
  
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="/static/js/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="/static/js/jquery.plugin.min.js"&gt;&lt;/script&gt; 
  &lt;script src="/static/js/jquery.datepick.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/vue/latest/vue.js"&gt;&lt;/script&gt;
  &lt;script src="/static/js/csrftoken.js"&gt;&lt;/script&gt;
  &lt;script src="/static/js/jquery.TableCSVExport.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      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;
  
  &lt;/script&gt;
  &lt;script type="text/javascript" src="/static/js/student/student-followback.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>absent-followback.js file</p>
  </blockquote>
  
  <pre><code>$(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('&lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt; 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();
              }
          }
      })
  </code></pre>