如何更改 Vue.js 中的输入名称？答案

【问题标题】：How to change the input name in Vue.js?如何更改 Vue.js 中的输入名称？
【发布时间】：2020-05-01 22:59:25
【问题描述】：

我想使用动态表单。并且输入名称必须是数组。然后必须通过自动添加数组号进行发布。

以下是我的代码。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title></title>

    <!-- Scripts -->
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"crossorigin="anonymous">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
    <form action="" method="post">
            <div id="sample">
                <button v-on:click="addNewItemForm">New Item</button>
                <div v-for="(item, index) in items">
                    <span style="coursor:pointer" v-on:click="deleteItemForm(index)">close</span>
                    <div>
                        <div>number({{index+1}})</div>
                        <div>
                            <label>Title:</label>
                            <div>
                                <input type="text" name="title[{{index}}]" required placeholder="here is title" v-model="item.title">
                                <p class="alert-warning">{{item.title}}</p>
                            </div>
                        </div>
                        <div>
                            <label>Detail:</label>
                            <div>
                                <input type="text" name="detail[{{index}}]" required placeholder="here is detail" v-model="item.detail">
                                <p>{{item.detail}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-3">
                    <button type="submit" class="btn btn-success px-3">Register</button>
                </div>
            </div>
    </form>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</body>

</html>

<script>
    var app = new Vue ({
        name:'Sample-app',
        el:'#sample',
        data:{
            items:[
                {
                    title:'',
                    detail:''
                }
            ]
        },
        methods:{
            addNewItemForm(){
                this.items.push({
                    title:'',
                    detail:''
                })
            },
            deleteItemForm(index){
                this.items.splice(index,1)
            }
        }
    })
</script>

这里是代码笔中的链接。您可以查看此表格。 [https://codepen.io/takudemo/pen/NWPBYMe?fbclid=IwAR3bpfc3IuI6cz7Y02ZgGGetDkDIHb5aC4op4earENzKYIkftPE2ZzzI51Q] 我试过这样。

<div>
 <input type="text" name="title[{{index}}]" required placeholder="here is title" v-model="item.title">
 <p class="alert-warning">{{item.title}}</p>
</div>

还有细节。

但它不起作用。以下是错误信息。

[Vue warn]: Error compiling template:

name="title[{{index}}]": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

8  |                              <label>Title:</label>
9  |                              <div>
10 |                                  <input type="text" name="title[{{index}}]" required="" placeholder="here is title" v-model="item.title">
   |                                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 |                                  <p class="alert-warning">{{item.title}}</p>
12 |                              </div>

如果您有任何想法可以解决它。请告诉我。

【问题讨论】：

item的数量是动态的，每个item都有title和detail。当按下添加项目按钮时，应该有添加按钮的字段。这是你想做的吗
你是 vue 新手吗？您使用 v-bind 处理这些内容，然后将其保存在您的数据对象中......
是的，我是 vue 新手。顺便说一句，我通过这段代码解决了。谢谢您的回复。
我会结束这个问题。
如果您有其他想法。请告诉我。我想知道以改进。我想为将来的初学者提供帮助。

标签： php html vue.js

【解决方案1】：

首先，如果您想在 VueJS 中动态设置某些属性，请使用 :。

其次，即使您尝试:name="title[index]"，它也不起作用，因为您的data 中没有title 数组。您只有 items 数组。如果要从中设置名称，请在“数据”中添加 title 和 detail 数组。

但我假设您想生成具有相应项目的title 和detail 属性的名称。

所以，而不是这个：name="detail[{{index}}]" 和 name="detail[{{index}}]" 使用这个：:name="item.title" 和 :name="item.detail"。

还可以将一些内容保存到addNewItemForm 中的title 和detail 以查看更改，例如，像这样：

 addNewItemForm(){
                this.items.push({
                    title:'title' + (this.items.length+1),
                    detail:'detail' + (this.items.length+1)
                })

【讨论】：

感谢您提供示例代码。我无法想象这种方式。但我无法用数组获取名称。例如，这是第二个标题输入「name="title2"」的结果，即使第一个标题输入名称为空。我可以通过这段代码来解决。
但我感谢你帮助我。我是 vue 的新手，也是 javascript。我可以知道另一种解决方法。

【解决方案2】：

您在这里面临的问题是您想要动态设置标签属性。为了实现这一点，您需要 : 或 v-bind: 语法。最重要的是，html 属性始终是一个字符串。因此，牢记这两件事，您正在寻找的是：

<input type="text" :name="`title[${index}]`"
 required="" placeholder="here is title" v-model="item.title">

P.S.：话虽如此，我会重新考虑使用该名称，因为它感觉您正在尝试使用 javascript 对象，而它只是一个字符串。

【讨论】：

感谢您的回复和示例代码。我不知道解决这个问题的方法。没错。我想获得纯粹是字符串的值。然后我用这段代码解决了。感谢您的帮助。