为了账号安全,请及时绑定邮箱和手机立即绑定

如何更改 Vue.js 中的输入名称?

如何更改 Vue.js 中的输入名称?

PHP
守着星空守着你 2022-07-22 10:59:15
我想使用动态形式。并且输入名称必须是数组。然后必须通过自动添加数组编号进行发布。以下是我的代码。<!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>
查看完整描述

2 回答

?
狐的传说

TA贡献1804条经验 获得超3个赞

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

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

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

所以,而不是 this:name="detail[{{index}}]"name="detail[{{index}}]" 使用 this::name="item.title":name="item.detail".

并保存一些内容以查看更改title,例如,如下所示:detailaddNewItemForm

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


查看完整回答
反对 回复 2022-07-22
?
繁华开满天机

TA贡献1816条经验 获得超4个赞

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

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

PS:话虽如此,我会重新考虑使用该名称,因为它感觉您正在尝试使用 javascript 对象,而它纯粹是一个字符串。


查看完整回答
反对 回复 2022-07-22
  • 2 回答
  • 0 关注
  • 95 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信