We Keep Coding

vue.js updated hook keeps on rerendering page without update in the state

I am trying to get data from an api, while using updated() to rerender when there is a change in the state that holds the fetch url but the updated hooks keeps rendering without any change in the state.
I use click events to monitor the state change but the update happens without state change
the template
<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>
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>

What I think is happening is a loop - Component Inits -> Gets Data -> Updated is called, which again triggers getData again, then the cycle repeats itself.
From what I remember Vue will rerender as long as a variable value is set and it does not care if the old value and the new are the same.
To get around that you should just call getData inside the selectclass and handleSearch. That should prevent the loop from starting.
Look at this warning in the documentation:
https://vuejs.org/api/options-lifecycle.html#updated

Checking a substring from a programmatically added element in VueJs

I have a form that adds a new line on a button click. The new line must check for logic independently. In this case, it's chacking the first 2 digits of a barcode and associating it to a data set to see if it matches and return the appropriate value or "nothing found". I can't seem to get this right. First, it's not really evaluating at all. It only gives me "No Agency found" and second, it's doing it for all fields (because they all have the same v-model on a new line add). How can I achieve this so that it evaluates correctly and independently from each other?
Here's the relevant code in my template and script
<div id="q-app" class="q-pa-lg">
<div class="col-6">
<div v-for="(barcodefield, index) in barcodefields" :key="index">
<div class="flex q-pt-lg">
<div class="row flex-center">
<div class="col-3">
<div class="column">
<div class="row q-pr-lg items-center">
<label class="text-weight-medium">Starting Roll #:</label>
<q-input outlined square dense maxlength="24"
v-model.trim="barcodefield.start" ref="bcentry"></q-input>
</div>
</div>
</div>
<div class="col-3">
<div class="column">
<div class="row q-pr-lg items-center">
<label class="text-weight-medium">Ending Roll #:</label>
<q-input outlined square dense maxlength="24"
v-model.trim="barcodefield.end" #blur="showAgencyName" ref="bcentry"></q-input>
</div>
</div>
</div>
<div class="col-5">
<div class="column">
<label class="text-weight-medium">
Agency:
</label>
<div v-if="agencyName" style="min-height: 40px">
{{ agencyName }}
</div>
<div v-else style="min-height: 40px"></div>
</div>
</div>
<div class="col-1">
<div class="block float-right">
<q-btn v-if="index + 1 === barcodefields.length" #click="addLine" icon="add" color="primary" round />
<q-btn v-else style="min-width: 42px"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
export default {
data() {
return {
barcodefields: [],
barcodeprefixes: {
"10": "Boston",
"11": "New York",
"13": "Houston",
"14": "Connecticut",
"16": "SIA",
"17": "Colorado",
"18": "Chicago",
"19": "Washington",
},
barcodefield: {
star: "",
end: ""
},
agencyName: "",
};
},
methods: {
addLine() {
this.barcodefields.push({
start: null,
end: null
});
},
showAgencyName() {
var str = this.barcodefield.end;
var res = str.substring(0, 2);
if (this.barcodeprefixes[res] == undefined) {
this.agencyName = "Agency not found";
} else {
this.agencyName = this.barcodeprefixes[res];
}
},
},
mounted() {
this.addLine();
}
}
Here is a codepen for you.

There are several things going on here:
First, as Simon points out, don't name loop variables the same thing as a top-level data element. Instead of <div v-for="(barcodefield, index) in barcodefields" :key="index">, do <div v-for="(item, index) in barcodefields" :key="index">. Then update all the barcodefield.start and barcodfield.end references to item.start and item.end.
Then, you need to get each item to have its own agencyName, instead of all of them referring to the same data.
Update showAgencyName to this:
showAgencyName(item) {
var str = item.end;
var res = str.substring(0, 2);
if (this.barcodeprefixes[res] == undefined) {
item.agencyName = "Agency not found";
} else {
item.agencyName = this.barcodeprefixes[res];
}
},
Then you can call it like this: #blur="showAgencyName(item)"
And use it in the html like so:
<div v-if="item.agencyName" style="min-height: 40px">
{{ item.agencyName }}
</div>
(And you can get rid of the top-level barcodefield in the data object, because it's not used anymore.)
Fiddle here:
https://jsfiddle.net/ebbishop/7r1pqx9f/

First you should change name of the for loop variable named "barcodefield", beacause you already have one in your data structure
Second, i would personnaly use a function {{ getAgencyName(b) }} instead of {{ agencyName }} otherwise you will have same agency name for all lines

There are a couple of problem with this.
First, you have a typo in the barcodefield data object. You have "star" instead of "start".
Secondly in the showAgency method you are referencing the this.barcodefield properties but that doesn't exist.
What you can do is pass the index of the barcodefield to the showAgencyName method, and use that inside the method to get the desired barcodefield from the barcodefields array.
In your html:
<q-input outlined square dense maxlength="24"
v-model.trim="barcodefield.end" #blur="showAgencyName(index)" ref="bcentry"></q-input>
and the showAgencyName method:
showAgencyName(index) {
const barcodefield = this.barcodefields[index]
var str = barcodefield.end;
var res = str.substring(0, 2);
if (this.barcodeprefixes[res] == undefined) {
this.agencyName = "Agency not found";
} else {
this.agencyName = this.barcodeprefixes[res];
}
}
UPDATE:
There is another problem that I didn't notice at first. The agencyName is overwritten every time you add a new barcodefield since it is kind of a global value.
I update the Codepen with the simplest solution I could think of. Return the name of the agency from the showAgencyName and use that to print it on the interface. There are many possible other solutions to this (for example add the name the the barcodefields object in the array).
Here is a working Codepen

VueJS Components inside a loop act as one

UPDATE
Was able to make it work, but got one last problem. Updated code is here:
VueJs not working on first click or first event
-----------------------------------------------------------
I've been trying to find out a way for the components inside a loop to not act as one.
I have a loop (3 divs), and inside the loop, I have 2 textboxes. But whenever I enter a value in any of them, the value is populated to everyone.
Can anyone help me separate those components?
I'm trying to make the parent div (1st loop) dynamic. So the children components (2nd loop) should be acting separately with their own grandparent components (textbox).
Here's my code:
<div id="app">
<div v-for="(ctr, c) in 3" :key="c">
<button #click="input_add">1st</button>
<div>
<div v-for="(input, act) in inputs" :key="act.id">
<input type="text" v-model="input.name">
<input type="text" v-model="input.time">
<button #click="input_remove(act)">Delete</button>
<button #click="input_add">Add row</button>
</div>
</div>
{{ inputs }}
</div>
</div>
const app = new Vue({
el: "#app",
data: {
inputs: [],
counter: 0,
},
methods: {
input_add() {
this.inputs.push({
id: this.counter + 1,
day: null,
name: null,
time: null,
})
this.counter += 1
},
input_remove(index) {
this.inputs.splice(index,1)
this.counter -= 1
}
}
});
Result:

as I mentioned in the comment, you should create a component for the iterated item.
parent component:
<div v-for="(item, index) in array" :key="index">
<child :item="item" />
</div>
Now you sent the item as prop. Let's catch it in child.
child components:
<div>
<input type="text" v-model="input.name">
<input type="text" v-model="input.time">
<button #click="input_remove(act)">Delete</button>
<button #click="input_add">Add row</button>
</div>
{{ inputs }}
props: [item], // I am not sure you need it or not, BUT just showing how to do it.
data() {return { // your datas };},
methods: {
// your methods...
},
//and else...
Now each iterated item can control self only. I am hope it make sense now.
then build the buttons an input in child component. After that you can apply the events for just clicked item.

You should use Array of Objects. Here's a codesandbox. This way everytime you add a new object to the array, a new index is created with a new name and time ready to be filled in.
<template>
<div id="app">
<img width="25%" src="./assets/logo.png">
<div v-for="item in basic" :key="item.id">
<button #click="addRow">Add row</button>
<input type="text" v-model="item.name">
<input type="text" v-model="item.time">
{{ item.name }} - {{ item.time }}
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
id: 1,
basic: [{ name: "", time: "" }]
};
},
methods: {
addRow() {
console.log("added");
this.id += 1;
this.basic.push({
name: "",
time: ""
});
}
}
};
</script>

Adding persistence to local storage to a Vue app

I am learning to deal with VueJS and made a simple todo app. It works well, but I want to store data locally and make it persistent even if there is a page reload.
This is the code produced following instruction of a few useful tutorials (leaving CSS outside to ease readability):
<template>
<div class="main-container">
<div class="header md-elevation-4">
<h1 class="md-title">{{ header }}</h1>
</div>
<div class="todo-list">
<div class="row"></div>
<div class="row">
<!-- add new todo with enter key -->
<md-field class="todo-input">
<md-input
v-model="currentTodo"
#keydown.enter="addTodo()"
placeholder="Add a todo! It's easy!"
/>
</md-field>
<!-- for all todos, set class of edited todos -->
<ul class="todos">
<div class="list-div">
<li v-for="todo in todos" :key="todo.id">
<!-- binds checkbox to todo model after each instance; -->
<input
class="toggle-todo"
type="checkbox"
v-model="todo.completed"
/>
<!-- starts editing process on double click -->
<span
class="todo-item-label"
:class="{ completed: todo.completed }"
#dblclick="editTodo(todo)"
v-if="!todo.edit"
>{{ todo.label }}</span
>
<!-- concludes editing with enter click -->
<input
v-else
class="todo-item-edit"
type="text"
v-model="todo.label"
#keyup.enter="completedEdit(todo)"
/>
<!-- deletes todos using removeTodo method -->
<i
class="material-icons"
alt="remove toDo"
#click="removeTodo(todo)"
>delete</i
>
</li>
</div>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "RegularToolbar",
data() {
return {
header: "A VueJS ToDo App",
todos: [],
currentTodo: "",
completed: false, // add a completed property
editedToDo: null // add a edited property
};
},
methods: {
addTodo() {
this.todos.push({
id: this.todos.length,
label: this.currentTodo,
completed: false, // initializes property
edit: false // initializes property
});
this.currentTodo = "";
},
mounted() {
// console.log('App mounted!');
if (localStorage.getItem("todos"))
this.todos = JSON.parse(localStorage.getItem("todos"));
},
watch: {
todos: {
handler() {
// console.log('Todos changed!');
localStorage.setItem("todos", JSON.stringify(this.todos));
},
deep: true
}
},
removeTodo(todo) {
// allows users to remove todos
var index = this.todos.indexOf(todo);
this.todos.splice(index, 1);
},
editTodo(todo) {
todo.edit = true;
},
completedEdit(todo) {
todo.edit = false;
}
}
};
</script>
<style lang="scss" scoped></style>
As it is, all the JS part referring to mount and watch does not work. I am able to add new todos and delete them as I wish, but it does not retain the data if the user reloads the page.
Could some of the colleagues spot what I am missing here?

It's a problem of code organization:
Your mounted and watch sections are currently inside the methods section, which will prevent them from firing as expected.
Move those out into their own sections (both should be at the same level as methods) and you should be all set.
With those edits and nothing else, I've got your code working in a fiddle here: https://jsfiddle.net/ebbishop/dc82unyb/

Vue.js dynamic element creation with localStorage

I'm completely new to Vue and I can't understand the proper way to render components with dynamic values in Vue.js.
So I have this code below :
new Vue({
el: "#notes",
data: {
title: "",
body: ""
},
methods: {
add: function() {
localStorage.setItem($("#title").val(), $("#body").val());
location.reload(true);
},
clear: function() {
localStorage.clear();
location.reload(true);
}
},
created: function() {
for (i = 0; i < localStorage.length; i++) {
this.title = localStorage.key(i);
this.body = localStorage.getItem(localStorage.key(i));
}
}
});
<div id="notes">
<div class="container">
<div class="form-group">
<label for="title">Enter title</label>
<input class="form-control" id="title"/>
</div>
<div class="form-group">
<label for="body">Enter body</label>
<textarea class="form-control" id="body"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary" #click="add">Add</button>
</div>
<div class="card" style="width:18rem;" v-for="i in localStorage">
<div class="card-body">
<h5 class="card-title">{{title}}</h5>
<p class="card-text">{{body}}</p><a class="card-link" #click="clear">Delete</a>
</div>
</div>
</div>
</div>
And I can't figure out why does this code renders the elements with the same values, I mean if I have two values in localStorage it renders two elements with the value of the last one on localStorage.
Maybe there's some problem with the loop on created? I need some help with understanding the Vue rendering and fixing my function
CodePen
Thank you very much for spending your precious time with my issue! Thank you for any help!

You have one title variable and one body variable. It can't store two values in one variable, so the second overwrites the first. You need arrays.