vuejs v-for with django not working for dynamic data

Question

I am implementing a table using vuejs + django. When I am declaring row and column statically, it is working. but when I am taking the value from django, it is not working anymore, though it is printing correct value.

My HTML code looks like

{% verbatim %}
        <div class="col-9">
            <label><h4>Position</h4></label> col: {{tableCols}} : row: {{tableRows}}   (here it is printing correct value)
            <table>
                <tr v-for="row in tableRows">
                    <td v-for="col in tableCols"
                        v-bind:class="{selected: selectedData === counter(row,col)}"
                        v-on:mousedown="mouseDown(counter(row,col))"
                        v-on:mouseover="mouseOver(counter(row,col))"
                        v-on:mouseup="mouseUp"
                    >
                        {{rowName[row-1]}}:{{col}}:{{counter(row,col)}}
                    </td>

                </tr>
            </table>

        </div>
        <input type="hidden" name="containerIDs" v-model="selectedData">

        {% endverbatim %}

and vuejs code looks like

new Vue({

    el: '#testtube',
    data: {
        tableCols : "{{testtubeplate.number_of_columns}}", // 12,
        tableRows : "{{testtubeplate.number_of_rows}}", //8,
        rowName: RowName,
        selectedData: [],
        cellNo: 0,
        isMouseDown:false

    },
    methods: { 
    ...

in HTML I have printed col: {{tableCols}} : row: {{tableRows}}, which is printing right value, but only 1 row and 2 column is creating instead of 12 and 8. But if I put 12, 8 statically it is working. (pic attached)

Any suggestions?

Answer 1

Got the solution, I have to convert to value into integer.

So need to change vuejs code as

tableCols : parseInt("{{testtubeplate.number_of_columns}}"), // 12,
tableRows : parseInt("{{testtubeplate.number_of_rows}}"), //8,