Question

我有vuejs组件，可以为表生成行。该组件的代码如下。

组件在没有is='constitutionrow'行的情况下加载表格上方的值，但使用is关键字，并发生以下错误：

Uncaught RangeError错误：超出最大调用堆栈大小

任何关于如何修复它的建议都会有所帮助。

    Vue.component('constitutionrow', {props: ['id','fid','jlpcandidate','constitution','pnpcandidate','votesjlp','votespnp'],
template:
" <tr 'constitutionrow'>" +
"<td> {{ id }}</td>" +
"<td>{{ fid }}</td>" +
"<td>{{ constitution }}</td> " +
"<td>{{ jlpcandidate }}</td>"  +
"<td>{{ pnpcandidate }}</td>" +
"<td>{{ votesjlp }}</td>"+
"<td>{{ votespnp }}</td>" +
" <td class='center'>" +
"<div>" +
"<a id='' class='glyphicon glyphicon-edit editbtn'  v-on:click='editRecord()'></a>" +
"</div>" +
"</td>" +
" </tr>",

data: function ()
 {

    return {

        hidden: true,
        show: false,
        selectedAnswerer:'',
    }
},
methods: {
    editRecord:function()
    {

        $('.editbtn').colorbox({
            html:"" +
            "<div id='editformConstituency'  class='form-group'>" +
            " <label >Fid</label> <input type='text'  v-model='fid' value='self.' class='form-control'> " +
            " <label >Constitution</label> <input type='text'  v-model='constitution' class='form-control'>"+
            " <label >JLP Candidate</label> <input type='text'  v-model='jlpCandidate' class='form-control'>"+
            " <label >PNP Candidate</label><input type='text'  v-model='phpCandidate' class='form-control'>" +
            " <label >Votes JLP </label> <input type='text'  v-model='votesJLP' class='form-control'>"+
            " <label >Votes PNP </label> <input type='text'  v-model='votesPnp' class='form-control'>"+
            "<button v-on:click='submitEdit()'>Submit</button>"+
            "  <script src='http://localhost/ElectionMapApplication/public/js/vuecontrollers/editFormConstituency.js'></script>" +
            "</div>",
            width: "75%",
            height: "75%",
            onComplete: function(){
                var bg = $.colorbox.element().data('bg');
                $('#cboxLoadedContent').css('backgroundColor', bg);
            }
        });
        },
}});

值出现在上表中 Values Appear Above Table

Answer 1

该错误通常意味着您有一个调用自身的函数。那里的HTML是你的constructrow组件的模板，但是在其中有一个<tr is='constitutionrow'>，它正在创建另一个constructrow组件。这将继续无休止地进行。

表格无法正确渲染vuejs

1 个答案: