Can anyone tell me why this is happening and how to prevent it? Any time I type into the input field it fires off the welcomeFilter() and I don’t want that happening. Super frustrating and I’m wondering why Vue does this and how to get around it.
<template>
<div>
<div>
<div v-on:click="click()">Hello</div>
<div :text-content.prop="welcome | welcomeFilter"></div>
<form>
<input type="text" v-model="search" placeholder="Search albome here"/>
</form>
</div>
<div v-for="item in data" :key="item.id">
</div>
</div>
</template>
<script>
export default {
name: 'App',
data: function(){
return {
data: [],
welcome: [
'hello',
'ala',
'hi'
],
search: ''
}
},
computed: {
filterNames: function(){
return this.data.filter(item => {
return item.title.match(this.search)
})
}
},
filters: {
welcomeFilter: function(welcome){
const random = Math.floor(Math.random() * welcome.length)
return welcome[random]
}
},
beforeMount(){
this.fetchAPI();
},
methods: {
fetchAPI(){
fetch('http://jsonplaceholder.typicode.com/albums')
.then(response => response.json())
.then((results) => {
console.log(results)
this.data = results;
});
},
}
}
</script>