Question

我正在使用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，它就可以工作了。（附图）

有什么建议吗？

Answer 1

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

因此需要将vuejs代码更改为

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

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

1 个答案: