How to call a method function in watch vuejs - vue.js

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>