Erreur: Les modèles ne doivent être responsables que du mappage de l'état à l'interface utilisateur. Évitez de placer des balises avec des effets secondaires dans vos modèles, tels que & lt; script & gt;
Je suis en utilisant Vuejs et je reçois ce message d'avertissement dans la console. Aussi pas de chargement des données en raison de cet avertissement. J'ai vérifié le code pour les tags, mais ne trouvez pas tout.
Est-ce à cause du code javascript ou j'ai quelque chose qui cloche dans mon code html?
Voici mon 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 fichier
$(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();
}
}
})source d'informationauteur Raj Subit
Vous devez vous connecter pour publier un commentaire.
Je pense que la réponse est dans votre question, titre. Juste se débarrasser de tous les
<script>balises dans le modèle, les mettre à l'extérieur du modèle.Dans ce cas, vous utilisez
bodycomme le modèle et vous sont mettre des scripts à l'intérieur de votre modèle (body)Le plus simple est de changer le
el: 'body'àel: '#wrapper'et modifier votre code html àAssurez-vous d'avoir une balise de fermeture sur votre élément racine.
J'ai juste passé les 6 dernières heures supprimant systématiquement les choses et en tirant mes cheveux. S'avère que j'avais supprimé mon clôture à un certain point, et la Vue était interprétation
source d'information
une paire de la non-concordance des balises (div, span) peut provoquer cette erreur.
C'est à cause de la balise script dans votre application. Dans mon cas, c'était à cause de google captcha qui était à ma portée. Google captcha iframe contient balise de script
Vous pouvez utiliser la balise script et il fonctionne parfaitement.
J'ai été confrontée au même problème lorsque j'ai utilisé
<script></script>balise sans préciser son type.Après l'utilisation de l'attribut de type de Vue ne m'avertir de l'erreur critique: