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

Posted 2023-02-22

【中文标题】为每一行分配一个带有增量整数的名称，以区分 Vue.js 中表中的行

【英文标题】：assign every row a name with incremental integer to differentiate the rows in table in Vue.js

【发布时间】：2021-09-16 04:56:58

【问题描述】：

我有一个网络应用，前端是 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="discipline_code_course_code_$indexor:name="title_$index

【参考方案1】：

试试下面的

<td name="Title_index"> row.title </td>

或

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

【讨论】：

使用ur方法失败，后台post中没有相关key，post里面什么都没有

【参考方案2】：

如果我没看错，你已经在做你想做的事了！ Isbn 和您用作键的索引的组合与您想要的 name 属性相同。

所以你可以使用

<td :name="`title_$index`"> row.title </td>

顺便说一句，最好使用“isbn”和索引以外的东西作为键。如果你有它，也许是真正的 isbn，因为它是独一无二的。

【讨论】：

这里很好地解释了为什么要使用唯一键。也许在您的情况下，这不会有太大影响，但也许在某些时候您会通过前端实现切换书籍的顺序，最终可能会遇到一些转换困难dev.to/mburazin/…

使用ur方法失败，后台post中没有相关key，post里面什么都没有

我认为你需要更详细地解释你想要做什么。我的回答为您提供了一个解决方案，可以通过您的 v-for 命名生成的

标签。如果要在前端添加数据以在后端读取它，则需要循环它并添加特定的属性。太帮助您了，我需要查看您的更多代码以了解您想要实现的目标。