How to set tags in horizontal line in a v-for using Laravel - Vue.js and Element-ui

Question

I'm trying to show categories of a recipe with <el-tag>, however they're all showing like one under the other:

I would like them to be more like this

These tags are inside an <el-table> which has this stucture

<el-table>
    <el-table-column
        prop="name"
        label="Name">
    </el-table-column>
    <el-table-column
        label="Category">
        <template slot-scope="scope">
            <div class="tag-container" v-for="cat in scope.row.categories">
                <el-tag type="success">{{cat.name}}</el-tag>
            </div>
        </template>
    </el-table-column>
    <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="medium"
                placeholder="Search"/>
        </template>

        <template slot-scope="scope">
            <div class="btn-link-edit action-button" @click="edit(scope.row)">
                <i class="fas fa-pencil-alt"></i>
            </div>
            <div class="btn-link-delete action-button" @click="remove(scope.row)">
                <i class="fas fa-trash"></i>
            </div>
        </template>
    </el-table-column>
</el-table>

I also creating the class

.tag-container {
    display: flex;
    flex-direction: row;
}

Is there a way to make them look like the example I showed?

@MikeRoss these are inside a table row, can this still be used in there? — Nancy
– Nancy, Commented Nov 7, 2019 at 22:18
I'm using the Element-ui table component element.eleme.io/#/en-US/component/table — Nancy
– Nancy, Commented Nov 7, 2019 at 22:27

Mike Ross · Accepted Answer · 2019-11-07 22:46:30Z

3

Use following css class

.container {
  display: flex; /* or inline-flex */
  flex-direction: row
}

Turns out you don't need flex

checkout this codepen

<el-table-column
    label="Category">
    <template slot-scope="scope">
        <template v-for="cat in scope.row.categories">
            <el-tag type="success">{{cat.name}}</el-tag>
        </div>
    </template>
</el-table-column>

edited Nov 7, 2019 at 22:46

answered Nov 7, 2019 at 22:19

Mike Ross

2,9725 gold badges54 silver badges107 bronze badges

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

1 Comment

Nancy Over a year ago

I ended up wrapping the div with another div and setting this class to that and adding a margin-right to the tag class, and this gave me result I wanted, Thanks for your suggestion!

albert_anthony6 · Accepted Answer · 2021-03-11 01:35:59Z

0

I know I'm pretty late to answer this but I just had this issue myself and discovered that the issue was that you're using v-for on the container element. That is why your code was creating multiple containers with the child inside but really you only wanted to create multiple children within that one single container. Also, it would be a good idea to always add the key attribute on the same line you're using v-for for Vue.js

Your code

<div class="tag-container" v-for="cat in scope.row.categories">
    <el-tag type="success">{{cat.name}}</el-tag>
</div>

Code that would fix your issue

<div class="tag-container">
    <el-tag type="success" v-for="cat in scope.row.categories">{{cat.name}}</el-tag>
</div>

answered Mar 11, 2021 at 1:35

albert_anthony6

6143 gold badges11 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to set tags in horizontal line in a v-for using Laravel - Vue.js and Element-ui

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related