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

by

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>
👤Mike Ross

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>
👤albert_anthony6

Leave a comment