Laravel+vuejs, how to loop inside table td tag?

Question

Below shows my data. I am trying to loop Item inside table <td> tag so that it forms two items in one column.

user
    >"name":"Bob"
    >"id":1
    >"Item":
        >"name":"Desk"
        >"name":"Chair"

Code

<table class="table table-hover">
    <tbody>
        <tr>
            <th>Name</th>
            <th>Items</th>
        </tr>

        <tr v-for="use in user.data" :key="use.id">
            <td>{{ use.name }}</td>
            <td v-for="a in use.item">
                {{ a.name }},
            </td>
        </tr>
    </tbody>
</table>

But when I do the codes above, it produce another column just like below picture. How do I put the Desk and Chair sits together in one column?

which css framework you are using?

umefarooq
– umefarooq

2019-02-13 06:13:00 +00:00
Commented Feb 13, 2019 at 6:13 — umefarooq
– umefarooq, Commented Feb 13, 2019 at 6:13
I'm using adminlte

LearnProgramming
– LearnProgramming

2019-02-13 06:15:35 +00:00
Commented Feb 13, 2019 at 6:15 — LearnProgramming
– LearnProgramming, Commented Feb 13, 2019 at 6:15

umefarooq · Accepted Answer · 2019-02-13 06:10:30Z

3

Hi just use a span tag in side td here is my solution, p or div tag are block tags, if you are using bootstrap 4 just set class to span inline-block or inline

<table class="table table-hover">
    <tbody>
        <tr>
            <th>Name</th>
            <th>Items</th>
        </tr>

        <tr v-for="use in user.data" :key="use.id">
            <td>{{ use.name }}</td>
            <td>
                <span v-for="a in use.item"> {{ a.name }}, </span>
            </td>
        </tr>
    </tbody>
</table>

answered Feb 13, 2019 at 6:10

umefarooq

4,5941 gold badge31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LearnProgramming Over a year ago

how do i remove the last , (since it display Desk, Chair,)? is there a function in vue to remove the last character?

umefarooq Over a year ago

can i see your controller code how you are getting items there will be better solution from php side no need to loop on front-end.

Niklesh Raut · Accepted Answer · 2019-02-13 05:55:32Z

0

v-for crates another elemenrs for you in each iteration. Use join function to display together

    <tr v-for="use in user.data" :key="use.id">
        <td>{{ use.name }}</td>
        <td>
            {{ use.item.join(", ") }},
        </td>
    </tr>

Output would be Desk, Chair

answered Feb 13, 2019 at 5:55

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

2 Comments

LearnProgramming Over a year ago

under item column, i got [object Object], [object Object]

Niklesh Raut Over a year ago

make use.item as array

Manokaran Majusaran · Accepted Answer · 2019-02-13 06:14:04Z

0

We can do this with using lodash `

  <tr v-for="use in user.data" :key="use.id">
      <td>{{ use.name }}</td>
      <td>
         {{ _.map(use.item, 'name').join(", ") }}
      </td>
  </tr>

`

answered Feb 13, 2019 at 6:14

Manokaran Majusaran

12 bronze badges

2 Comments

LearnProgramming Over a year ago

I have an error Property or method "_" is not defined on the instance but referenced during render

Manokaran Majusaran Over a year ago

lodash iam used this for pluck name from object need to include your file

Collectives™ on Stack Overflow

Laravel+vuejs, how to loop inside table td tag?

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related