How to call a method function in watch vuejs

Question

I write code like this:

<select class="section" @change="showIndex($event.target.selectedIndex)">    
      <option v-for="number in 50">{{ number}} per page</option>
</select>  
<div class="product__layout" v-for="product in showItem">    
       <p class="product__name">{{ product.name }}</p>

...

data() {
    return {
        products:[
            { name: 'abc' },
            { name: 'xyz' },
        ],
        
    }
},
methods:{
    showIndex(selectedItem){
        return selectedItem 
    }
},
computed:{
    showItem(){
        return this.products.slice(0, this.showItem)
    }
}

My code doesn't have results. Can someone help me what i'm doing wrong?

Answer 1

It seems you want to show a subset of products based on the number from a combo box.

As mentioned in the comments, this is best done via a computed property

new Vue({
  el: "#app",
  data: () => ({
    products:[
      { name: 'abc' },
      { name: 'xyz' },
    ],
    productCount: 1
  }),
  computed: {
    showProducts: ({ products, productCount }) => products.slice(0, productCount)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <p>
    Count:
    <!--    👇 use v-model to capture the selection -->
    <select v-model="productCount" class="section">
      <option v-for="number in 50" :value="number">{{ number }} per page</option>
    </select>
  </p>
  
  <!--                   👇 use the computed property here -->
  <div v-for="product in showProducts" class="product__layout" :key="product.name">
    <p class="product__name">{{ product.name }}</p>
  </div>
</div>