nanadjei2's avatar

Add id from v-for to dom elements

I am making a for loop with vuejs and displaying a list of users in a table. I want to add the id of users to the action attribute of a form element or classes of the elements in the table items.

This is my html:

    <tr v-for="(user, key, index) in users">
         <td>@{{ key+1 }}</td>
         <td v-text="user.name"></td>
         <td>@{{ user.email }}</td>
         <td>@{{ user.status }}</td>
          <td>
       <div class="btn-group pull-rights" role="group" aria-label="action-btns">
    <form id="statusform" :action="baseUrl+/user.id" method="POST">
    <label class="ui-switch mt-1 mr-2">
      <input @click="onSwitchStatus(user.id)" type="checkbox" :checked="user.status == 'active'" :value="user.status">    
        </form>
    </div>
   </td>

Am using laravel. I want the action attribute of the form to be for example… ‘localhost/project/user/edit/1/’ but it is not working. Can anyone help me;

0 likes
5 replies
rawilk's avatar

Try this instead:

<tr v-for="(user, index) in users">
    <td>@{{ index + 1 }}</td>
    ....
1 like
click's avatar

I suppose baseUrl is also a vuejs data or prop variable? If baseUrl ends with a / you should do baseUrl + user.id it it does not end with a slash you should do baseUrl +'/'+ user.id

<form id="statusform" :action="baseUrl +'/'+ user.id" method="POST">
nanadjei2's avatar

@wilk_randall Please you don't get me. My problem is not to display a counter. Kindly look at

   <form id="statusform" :action="baseUrl+/user.id" method="POST">

baseUrl = '‘localhost/project/user/edit/' therefore I want to the action="‘localhost/project/user/edit/1/" but am still getting ng `baseUrl+/use

I want a way to mix my dom with the for loop items. I don't know if you get me.

rawilk's avatar
rawilk
7 years ago
Best Answer
Level 47

@nanadjei2 I'm aware that's not the problem. As far as I'm aware, v-for only takes 2 parameters, that's why I changed that. Also, my bad for not looking closer at your url in the form, as I figured the rest of the code could have stayed the same. You need to change to action to something like this:

<form :action=`${baseUrl}/${user.id}` method="POST">
1 like

Please or to participate in this conversation.