表格无法使用Vue.js正确呈现

Question

I have vuejs component that generates the rows for a table. The code for the component is below.

The component loads the value above the table without is='constitutionrow' line, but with the is keyword, and the following error occurred:

error of Uncaught RangeError: Maximum call stack size exceeded

Any suggestion on how to fix it would help.

    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 Values Appear Above Table

Answer 1

That error generally means you have a function that is calling itself. The HTML in there is your template for the constitutionrow component, but within it you have a <tr is='constitutionrow'> which is creating another constitutionrow component. This would keep going endlessly.