错误:模板应该只负责将状态映射到 UI.避免在模板中放置带有副作用的标签，例如 <script> [英] 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>
问题描述
我正在使用 Vuejs，但我一直在控制台中收到此警告.由于此警告，也没有加载数据.我检查了代码中是否有不需要的标签，但没有找到.
这是因为 javascript 代码还是我的 html 有问题?
这是我的代码:
<块引用>HTML
<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>日期:</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 class="col-sm-2" style="float: right; margin-top:40px;"><button class="btn btn-info" type="button" id="csv_export">点击导出</button>
<div class="col-sm-12" style="margin:20px;"><table class="table table-sm table-striped table-bordered" id="absent-list"><头><tr><th>#</th><th style="text-align: center; font-size: 15px;">全名</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;">电话号码</th><th style="text-align: center; font-size: 15px;">Absent Reason</th><th style="text-align: center; font-size: 15px;">备注</th><th></th></tr></thead>
<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="记录在缺席_followback_records"><td style="text-align: center; font-size: 15px;"范围=行">{{$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_call}}</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-后续编辑">编辑 </a></td></tr></tbody><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 missingFollowbackListAPiUrl = "/student/api/absent/followback/list/11/";var缺席_reason = jQuery.parseJSON('[{"model": "studentprofile.absentreason", "pk": 1, "fields": {"created": "2016-05-08T06:09:42.410Z", "修改": "2016-05-08T06:09:42.410Z", "reason_name": "sick"}}, {"model": "studentprofile.absentreason", "pk": 2, "fields": {"created": "2016-05-08T06:09:42.416Z", "修改": "2016-05-08T06:09:42.416Z", "reason_name": "迟到"}}, {"model": "studentprofile.缺席原因"，pk":3，字段":{创建":2016-05-08T06:09:42.419Z"，修改":2016-05-08T06:09:42.419Z"，reason_name"": "在家工作"}}, {"model": "studentprofile.absentreason", "pk": 4, "fields": {"created": "2016-05-08T06:09:42.423Z", "修改": "2016-05-08T06:09:42.423Z", "reason_name": "公共假期"}}]');var profile_value = false;<script type="text/javascript" src="/static/js/student/student-followback.js"></script>
<块引用>
absent-followback.js 文件
$(function() {$( "#datepicker" ).datepick({dateFormat: 'yyyy-mm-dd'});});$('#csv_export').click(function (e) {e.preventDefault();$('#absent-list').TableCSVExport({交付:下载"，文件名:'absent-list(' + $( "#datepicker" ).val() + ').csv'});});var vm = new Vue({el: '身体',数据: {缺席_followback_records: [],followbackRecordIndex: '关闭',缺席原因列表:缺席原因，加载:假，当前数据:{}，个人资料:profile_value，listApiUrl: 缺席FollowbackListApiUrl},方法: {填充数据:函数(api_url){var self = this;$.get(api_url, 函数(数据){self.absent_followback_records = 数据；self.loading = false;});},getAbsentFollowbackRecord:函数(){var self = this;self.loading = true;var date = $( "#datepicker" ).val();var api_url = self.listApiUrl + '?date=' + date;self.populateData(api_url);},getProfileAbsentFollowbackRecord:函数(事件){var self = this;self.loading = true;var Expanded = $(event.target).attr('aria-expanded');如果(扩展=='假'){$(event.target).html('隐藏详细信息');var studentId = $(event.target).attr('studentId');var api_url = self.listApiUrl + '?student_id=' + studentId;self.populateData(api_url);}别的{$(event.target).html('显示详细信息');}},editAbsentFollowbackRecord:函数(followbackRecordIndex){var self = this;self.currentData = self.absent_followback_records[followbackRecordIndex];self.followbackRecordIndex = followbackRecordIndex;},updateAbsentFollowbackRecord:函数(followbackRecordIndex){var self = this;var updateData = self.currentData;var 缺席日期 = updateData.date;var student_id = updateData.student;var post_url = updateData.update_url;var person_call = updateData.person_call;var person_relation = updateData.person_relation;var phone_number = updateData.phone_number;var 缺席原因 = updateData.absent_reason;var 备注 = updateData.remarks;如果(person_call){变量数据 = {学生:parseInt(student_id),日期:缺席日期，被叫的人:被叫的人，人关系:人关系，电话号码:电话号码，缺席原因:parseInt(absent_reason),备注:备注};$('#updateAbsentFollowback').html('<i class="fa fa-spinner fa-spin"></i> Saving').attr('class', 'btn btn-primary disabled');$.ajax({网址:post_url，类型:PUT"，数据:JSON.stringify(数据)，数据类型:'json'，内容类型:应用程序/json"，成功:功能(响应数据){$('#updateAbsentFollowback').html('Save').attr('class', 'btn btn-success');如果(self.profile == true){api_url = self.listApiUrl + '?student_id=' + student_id;self.populateData(api_url);}别的{self.getAbsentFollowbackRecord();}},错误:函数(xhr，状态，错误抛出){控制台日志(错误抛出)；}});}}},准备好() {如果(this.profile ！= true){this.getAbsentFollowbackRecord();}}})您可以通过这种方式使用 script 标签，它会正常工作.当我使用 <script></script> 标签而不指定其类型时，我遇到了同样的问题.使用type属性后Vue没有警告我严重错误:
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();
}
}
})
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>
这篇关于错误:模板应该只负责将状态映射到 UI.避免在模板中放置带有副作用的标签，例如 <script>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
登录 关闭
