Seeking to retrieve data from an api and utilize updated() to trigger a rerender upon a change in the state that stores the fetch url. However, encountering an issue where the updated hook continues to render even when there is no alteration in the state.
Attempting to monitor state changes through click events, only to observe updates occurring without any real change in the state.
Here is the template code:
<template>
<div class="overlay" ref="overlay">
</div>
<div class="home">
Hello People
<form @submit.prevent="handleSearch">
<input type="text" name="search" v-model="search" />
<button type="submit">Search</button>
</form>
<select name="" id="select" v-model="select" v-on:change="selectclass">
<option value="">Default</option>
<option value="Breaking+Bad">Breaking Bad</option>
<option value="Better+Call+Saul">Better call saul</option>
</select>
<div class="charlist">
<div class="gridlist" v-for="char in chars" :key="char.id">
<div>
<div class="subgrid">
<img class="img" :src="char.img" alt="alt">
<p> {{ char.name }} </p>
<router-link :to="{ name: `Details`, params: {id: char.char_id} }">
<button> more</button>
</router-link>
</div>
</div>
</div>
</div>
</div>
</template>
And the script:
<script>
export default {
name: 'Home',
components: {
},
data() {
return {
url: 'https://www.breakingbadapi.com/api/characters?limit=10&offset=10',
search: "",
select: "",
chars: []
}
},
methods: {
handleSearch() {
this.url = `https://www.breakingbadapi.com/api/characters?name=${this.search}`
},
selectclass() {
this.url = `https://www.breakingbadapi.com/api/characters?category=${this.select}`
},
getData() {
fetch(this.url)
.then(res => res.json())
.then(data => {
this.chars = data
console.log(this.chars)
})
}
},
mounted() {
this.getData()
},
updated() {
console.log(this.url)
this.getData()
}
}
</script>