我想使用动态表单。和输入名称必须是数组。然后必须通过自动添加数组编号以进行发布。以下是我的代码。<!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>
2 回答
忽然笑
TA贡献1806条经验 获得超5个赞
首先,如果你想在 VueJS 中动态设置一些属性,请使用 .:
其次,即使您尝试它也不会起作用,因为您的.您只有数组。在“data”中添加和数组,如果要从中设置名称。:name="title[index]"
title
data
items
title
detail
但是,我想您要生成具有相应项的名称和属性。title
detail
因此,与其使用 this: 和 ,不如使用 this: 和 。name="detail[{{index}}]"
name="detail[{{index}}]"
:name="item.title"
:name="item.detail"
并且还可以将某些内容保存到并放入以查看更改,例如,如下所示:title
detail
addNewItemForm
addNewItemForm(){ this.items.push({ title:'title' + (this.items.length+1), detail:'detail' + (this.items.length+1) })
九州编程
TA贡献1785条经验 获得超4个赞
您在这里面临的问题是您希望动态设置标签属性。为了实现这一点,您需要 或 语法。最重要的是,html属性始终是一个字符串。因此,记住这两件事,您要寻找的是::
v-bind:
<input type="text" :name="`title[${index}]`" required="" placeholder="here is title" v-model="item.title">
P.S.:话虽如此,我会重新考虑使用这个名字,因为它感觉你正在尝试使用javascript对象,而它纯粹是一个字符串。
- 2 回答
- 0 关注
- 104 浏览
添加回答
举报
0/150
提交
取消