[Vuejs]-How to change the input name in Vue.js?

by

0👍

✅

First, if you want to set some attribute dynamically in VueJS use :.

Second, even if you try :name="title[index]" it won’t work because you don’t have title array in your data. You have only items array. Add title and detail arrays in ‘data’ if you want to set names from them.

But I suppose that you want to generate names with title and detail properties of the corresponding item.

So, instead of this: name="detail[{{index}}]" and name="detail[{{index}}]"
use this: :name="item.title" and :name="item.detail".

And also save something to title and detail in addNewItemForm to see the changes, for example, like this:

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

0👍

The issue you are facing here is that you want to dynamically set a tag attribute. In order to achieve that you need the : or v-bind: syntax. On top of that an html attribute is always a string. Hence, having these 2 things in mind what you are looking for is:

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

P.S.:Having that said, I would reconsider using that name as it feels you are trying to use a javascript object while it is purely a string.

Leave a comment