猿问

如何更改 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>

                        <div>

                            <label>Detail:</label>


繁星coding
浏览 105回答 2
2回答

忽然笑

首先，如果你想在 VueJS 中动态设置一些属性，请使用 .:其次，即使您尝试它也不会起作用，因为您的.您只有数组。在“data”中添加和数组，如果要从中设置名称。:name="title[index]"titledataitemstitledetail但是，我想您要生成具有相应项的名称和属性。titledetail因此，与其使用 this： 和 ，不如使用 this： 和 。name="detail[{{index}}]"name="detail[{{index}}]":name="item.title":name="item.detail"并且还可以将某些内容保存到并放入以查看更改，例如，如下所示：titledetailaddNewItemForm&nbsp;addNewItemForm(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.items.push({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:'title'&nbsp;+&nbsp;(this.items.length+1), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;detail:'detail'&nbsp;+&nbsp;(this.items.length+1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})
0

九州编程

您在这里面临的问题是您希望动态设置标签属性。为了实现这一点，您需要 或 语法。最重要的是，html属性始终是一个字符串。因此，记住这两件事，您要寻找的是：:v-bind:<input&nbsp;type="text"&nbsp;:name="`title[${index}]`" &nbsp;required=""&nbsp;placeholder="here&nbsp;is&nbsp;title"&nbsp;v-model="item.title">P.S.：话虽如此，我会重新考虑使用这个名字，因为它感觉你正在尝试使用javascript对象，而它纯粹是一个字符串。
0
随时随地看视频慕课网APP

相关分类

PHP
php如何把参数放在Http Request Heade？？？？ 1 回答
我要回答