Targeting last item in v-repeat with Vue JS

Question

I have a v-repeat list of items that are pulled from json.

I want to target the last item in the list to change its class.

How would I do this? My code is below...

HTML

<div id="app">
...
            <ul id="menu">
                <li v-repeat="items">
                    <i class="material-icons">{{ icon }}</i>
                    {{ name }}
                </li>
            </ul>
</div>

JS

var apiUrl = 'inc/menu.json.php'

new Vue({
    el: '#app',
    data: {
        active: true,
        items: []
    },
    ready: function(){
        this.fetchData()
    },
    methods: {
        toggle: function () {
            this.active = !this.active;
        },
        fetchData: function(){
            var xhr = new XMLHttpRequest(),
                self = this
            xhr.open('GET', apiUrl)
            xhr.onload = function () {
                self.items = JSON.parse(xhr.responseText)
            }
            xhr.send()
        }
    }
});

Is this retrieved data html or jsom?

Alvaro Silvino
– Alvaro Silvino

2015-09-13 16:56:56 +00:00
Commented Sep 13, 2015 at 16:56 — Alvaro Silvino
– Alvaro Silvino, Commented Sep 13, 2015 at 16:56
@Alvaro its a php script that echo json_encode($array)

noland
– noland

2015-09-13 17:13:06 +00:00
Commented Sep 13, 2015 at 17:13 — noland
– noland, Commented Sep 13, 2015 at 17:13

Mariusz Jamro · Accepted Answer · 2017-01-13 08:05:46Z

18

For Vue 2.0 the code looks slighly different:

<li v-for="(item, index) in items" v-bind:class="{last : index === (items.length-1)}">
  <i class="material-icons">{{ icon }}</i>
    {{ name }}
</li>

answered Jan 13, 2017 at 8:05

Mariusz Jamro

31.9k25 gold badges129 silver badges170 bronze badges

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

Comments

Jihad Waspada · Accepted Answer · 2015-09-17 17:13:27Z

5

You just need to add v-class like this

<li v-repeat="items" v-class="last : $index === (items.length-1)">
  <i class="material-icons">{{ icon }}</i>
    {{ name }}
</li>

where last is the class you want to add

answered Sep 17, 2015 at 17:13

Jihad Waspada

1,1731 gold badge11 silver badges16 bronze badges

3 Comments

Anand Patel Over a year ago

What if we apply some filter in v-repeat v-repeat="items | filter", how to get last index now?

Jihad Waspada Over a year ago

@AnandPatel As far as I know, you need to filter it in computed properties using this.$options.filters.filterBy() method, then it would work

Asqan Over a year ago

that does not work anymore for vue 2.x. For those who work with 2.x, can get a look at answer of @Mariusz Jamro

Collectives™ on Stack Overflow

Targeting last item in v-repeat with Vue JS

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related