vuejs v-for with django 不适用于动态数据

Question

我正在使用 vuejs + django 实现 table。当我静态声明行和列时，它正在工作。但是当我从 django 中获取值时，它不再工作了，尽管它正在打印正确的值。

我的 HTML 代码看起来像

{% 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 %}

vuejs 代码看起来像

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: { 
    ...

在 HTML 我打印了 col: {{tableCols}} : row: {{tableRows}}，这是打印正确的值，但只有 1 行并且正在创建 2 列而不是 12 和 8。但是，如果我静态地放置 12、8，它就可以工作。（附图片）

有什么建议吗？

Answer 1

得到解决方案，我必须将值转换为整数。

所以需要改vuejs代码为

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

vuejs v-for with django 不适用于动态数据

vuejs v-for with django not working for dynamic data

javascript

django

vue.js

dynamic-tables

v-for