vuejs v-for с django не работает для динамических данных - PullRequest
Новая
       22

vuejs v-for с django не работает для динамических данных

0 голосов
/ 03 июня 2018

Я реализую таблицу, используя 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}}, который печатает правильное значение, но вместо 12 и 8 создается только 1 строка и 2 столбца. Ноесли я ставлю 12, 8 статически это работает.(картинка прилагается)

enter image description here

Есть предложения?

1 Ответ

0 голосов
/ 11 июня 2018

Получил решение, я должен преобразовать значение в целое число.

Так что нужно изменить код vuejs как 

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