I'm new to JavaScript and JS frameworks. I have the following snippet of Vuejs code:

    <div v-for="coefficient in coefficients" class="coefficient">
        <div>
            <span class="name">name:{{coefficient.name}}</span>
            <span class="value">value:{{coefficient.value}}</span>
            <span>---</span>
        </div>
    </div>

Here is the output:

name: Ubuntu
value: 1
---
name: MacOS
value: 2
---
name: Windows
value: 3
---

How can I exclude the last item of coefficients by Vuejs?

I'm new to JavaScript and JS frameworks. I have the following snippet of Vuejs code:

    <div v-for="coefficient in coefficients" class="coefficient">
        <div>
            <span class="name">name:{{coefficient.name}}</span>
            <span class="value">value:{{coefficient.value}}</span>
            <span>---</span>
        </div>
    </div>

Here is the output:

name: Ubuntu
value: 1
---
name: MacOS
value: 2
---
name: Windows
value: 3
---

How can I exclude the last item of coefficients by Vuejs?

• javascript
• vue.js
• vue-ponent

• You're supposed to create the smaller array in your controller code, then iterate over that in your html template. v-for doesn't support slicing, afaik. – user5734311 Commented Dec 25, 2017 at 14:40

2 Answers 2

just use v-for="coefficient in coefficients.slice(0,-1)"

demo

You could use a puted property, or you could use coefficients.slice(0, -1) like so:

new Vue({
  data : {
    coefficients : [
    {name : "a", value : 2}, 
    {name : "b", value : 3}, 
    {name : "c", value : 4}]
  },
  el : "#app"  
})

<div id="app">
    <div v-for="coefficient in coefficients.slice(0, -1)" class="coefficient">
        <div>
            <span class="name">name:{{coefficient.name}}</span>
            <span class="value">value:{{coefficient.value}}</span>
            <span>---</span>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.13/vue.js"></script>