如何更改 Vue.js 中的输入名称？
我想使用动态形式。并且输入名称必须是数组。然后必须通过自动添加数组编号进行发布。
以下是我的代码。
<!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回答
-
狐的传说
首先，如果您想在 VueJS 中动态设置某些属性，请使用:.其次，即使您尝试:name="title[index]"它也不起作用，因为您title的data. 你只有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) }) -
繁华开满天机
您在这里面临的问题是您想要动态设置标签属性。为了实现这一点，您需要:orv-bind:语法。最重要的是，html 属性始终是一个字符串。因此，牢记这两件事，您正在寻找的是：<input type="text" :name="`title[${index}]`" required="" placeholder="here is title" v-model="item.title">PS：话虽如此，我会重新考虑使用该名称，因为它感觉您正在尝试使用 javascript 对象，而它纯粹是一个字符串。
随时随地看视频慕课网APP
PHP