时间戳

首页 > 解决方案 > 为每一行分配一个带有增量整数的名称，以区分 Vue.js 中表中的行

html - 为每一行分配一个带有增量整数的名称，以区分 Vue.js 中表中的行

问题描述

我有一个网络应用程序，前端是 Vue.js，后端是 Django。我想为每一行分配一个带有增量整数的名称以区分表中的行，因此在后端我可以循环一个整数范围以在表单提交后分别处理它们。

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
                <form id="myform" method="post" action="/tag_course/">
            <table>
                <thead>
                ...
                </thead>
                <tbody>
                <tr v-for="(row, index) in Rows" :key="`isbn-${index}`">
<td :name="`title_${index}`" >{{ row.title }}</td>
                    <td :name="`discipline_code_course_code_${index}`"  bgcolor= "white"><div contenteditable></div></td>          

                </tr>
                </tbody>
            </table>
<select id="semester" name="semester">
                    <option value="test">test</option>
                </select>

                </form>
    </div>
        <script>
          var book_rows = [{title:1, author:1, edition:1}, {title:2, author:2, edition:2}, {title:3, author:3, edition:3}]
            const app = new Vue({
                    el: '#app',
                    data:() => ({
                        filter: '',
                        rows: book_rows
                    }),
        });
        </script>

后端：

 def check(request):
    if request.method == 'POST':
        print(request.POST)       #here I only got semester value, but no 
     title and discipline_code_course_code related value

我有大约 1000 行，我怎样才能为不同行中的 name 属性命名为 Title_1、Title_2....

我尝试将:name="title_${index}"作为名称，但失败了。后端在帖子数据中没有这样的键

在后端我只能获得正常的名称值（学期），但无法使用:name="学科代码课程代码_$ {index} or：name =title_${index}

标签： htmldjangovue.js

解决方案

尝试使用以下

<td name="Title_{{index}}">{{ row.title }}</td>

或者

<td :name="`Title_${index}`">{{ row.title }}</td>

推荐阅读