带有 django 的 vuejs v-for 不适用于动态数据答案

【问题标题】：vuejs v-for with django not working for dynamic data带有 django 的 vuejs v-for 不适用于动态数据
【发布时间】：2018-06-03 17:04:16
【问题描述】：

我正在使用 vuejs + django 实现一个表。当我静态声明行和列时，它正在工作。但是当我从 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，它就可以工作。（附图片）

有什么建议吗？

【问题讨论】：

标签： javascript django vue.js dynamic-tables v-for

【解决方案1】：

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

所以需要把vuejs代码改成

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

【讨论】：