错误：模板应该只负责将状态映射到 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>错误：模板应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如 <script>
【发布时间】：2016-11-02 07:29:17
【问题描述】：

我正在使用 Vuejs，并且在控制台中不断收到此警告。由于此警告，也没有加载任何数据。我检查了代码中是否有不需要的标签，但没有找到。

这是因为 javascript 代码还是我的 html 有问题？

这是我的代码：

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 文件

$(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();
            }
        }
    })

【问题讨论】：

如果你显示编译后的 HTML 会更有用，因为我不知道 {% 是什么意思

标签： javascript django django-templates vue.js

【解决方案1】：

您可以通过这种方式使用脚本标签，它会正常工作。当我使用 <script></script> 标签而不指定其类型时，我遇到了同样的问题。使用 type 属性后，Vue 没有警告我严重错误：

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

【讨论】：

感谢您，帮助 VueJS 为这个糟糕的脚本嵌入了我必须使用的第 3 方服务。他们使用 type="text/javascript"。将其更改为“应用程序/javascript”避免了该问题。
你必须检查你的逻辑@Emilie
你怎么可能知道这个

【解决方案2】：

我认为答案在您的问题标题中。把模板里所有的<script>标签去掉，放到模板外面就好了。

在这种情况下，您使用 body 作为模板，并且您正在将脚本放入模板中 (body)

简单的解决方案是将el: 'body' 更改为el: '#wrapper' 并将您的html 编辑为

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

【讨论】：

我有类似的 html 文件和类似的脚本标签，它们工作得非常好。我认为问题出在js文件中。我将编辑并放置编译好的html和vue js文件
而且那个html文件的正文中也有一个脚本标签？我有同样的问题，但因为这个我无法使用身体。你确定工作的 html 在正文中有脚本标签吗？
我正在做一个非常规的练习，我从 Adobe Illustrator 导出 SVG，将其重命名为 .html 并在其中使用 Vue 进行一些交互。虽然它在我的另一台计算机上似乎工作正常，但我开始使用最新的 jquery 和 vue 在另一台计算机上进行练习，这开始发生 - 可能是标签内的脚本 (?) ，无论如何，我只是受到 Vue 的限制部分到我的 SVG 中的一个组中。
我必须在 Vue App div 中嵌入一个谷歌图表。有什么办法可以关闭错误？

【解决方案3】：

确保你的根元素上有一个结束标签。我刚刚花了最后 6 个小时系统地去除东西并拉出我的头发。原来我在某个时候删除了我的关闭，而 Vue 正在解释

【讨论】：

我已经检查了 html 中的所有开始和结束标签，并且所有标签都正确关闭了。感谢您的建议，我会在以后检查它们
就是这样，确保所有标签都正确关闭。

【解决方案4】：

一对不匹配的标签（div、span）可能会导致此错误。

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

【讨论】：

【解决方案5】：

这是因为您的应用范围内的脚本标签。就我而言，这是因为谷歌验证码在我的范围内。谷歌验证码 iframe 包含脚本标签

【讨论】：

我很抱歉，但事实是这不是谷歌脚本，而是我 vue 范围内的其他脚本标签。 iframe 中的脚本请勿打扰

【解决方案6】：

我的建议有点具体，因为我将 Vue JS v2 与 jQuery v3 结合使用。

我正在使用 jQuery 加载我的应用程序实例，如下所示：

$(() => {

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

});

因此，在整个文档加载之前不会启动。

在我的页脚中，我将在整个文档加载之前使用它更改任何有问题的脚本标记，但在我关闭主 HTML 标记之后：

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

这对我有用，而无需解析来自违规标签的任何输出并做任何更奢侈的事情。

如果您不使用 jQuery，可以使用本机文档选择器推断出这一点，就像我的示例一样。

【讨论】：

【解决方案7】：

（正如其他人所说，编辑首先检查模板中不匹配/未闭合的标签。Vue 对此非常挑剔）

可能是一个简单的组件标签的显式闭包：

版本：vue@2.6.11

出现错误：


...body html...

<bme-form-projval
show_debug_elements="Y"
form_name="batchform"
>

...body html...

还在那里：


<bme-form-projval
show_debug_elements="Y"
form_name="batchform"
/>

错误解决：

<bme-form-projval
show_debug_elements="Y"
form_name="batchform"
>

</bme-form-projval>

【讨论】：

【解决方案8】：

VueJs 不允许在应用的组件内部。例如，`

<body>
    <div id="vue-id">
        <!-- Ways of calling to templates-->
        <h2>{{ message }}</h2>
        <h2 v-text="message"></h2>
        <h3>{{ value * 5 }}</h3>
        <h3>{{ value }}</h3>

       <script></script>
    </div>    
</body>`

哪里在同一个 [ 应用程序的组件] 正确的选择是在应用的组件之外包含`

<body>
    <div id="vue-id">
        <!-- Ways of calling to templates-->
        <h2>{{ message }}</h2>
        <h2 v-text="message"></h2>
        <h3>{{ value * 5 }}</h3>
        <h3>{{ value }}</h3>
    </div>
    <script></script>
</body>

【讨论】：

【解决方案9】：

确保页面中的所有 HTML 标签都正确打开和关闭。

【讨论】：

【解决方案10】：

虽然将“script”更改为“script type="application/javascript"”会使警告消失，但会导致页面无法完成加载。因此，使用它不是一个好主意！

【讨论】：

【解决方案11】：

检查您的浏览器源代码，也许您正在使用的框架中添加了其他内容。就我而言，我没有删除 rails 布局模板。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。