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/
Related
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
I have a todo app that I am working on which I divided it into two component one for form and the other for the todo list. in todo list I have a Method that delete the todo but it delete two todo instead of one I tried to console log the component that I click on and found that it get logged twice. I tried prevent method on click solution i found it here in stackoverflow but it didn't work.
<template>
<div class="todo" v-for="(todo, index) in todos" :key="index">
<div class="todo-text">{{ todo.text }}</div>
<div class="IconDiv">
<fa #click.prevent="deleteTodo(index)" class="icon" icon="trash-alt" />
<fa #click="completeTodo(index)" class="icon" icon="edit" />
<fa class="icon" icon="check-square" />
</div>
</div>
</template>
<script>
export default {
name: "TodoList",
emits: ["removeTodo", "completEmit"],
props: {
msg: String,
todos: Array,
val: String
},
data() {
return {};
},
methods: {
deleteTodo(index) {
return console.log(this.todos[index].text);
}
}
};
</script>
I have a problem with vue.js slots. On one hand I need to display the slot code. On the other hand I need to use it in a textarea to send it to external source.
main.vue
<template>
<div class="main">
<my-code>
<template v-slot:css-code>
#custom-css {
width: 300px
height: 200px;
}
</template>
<template v-slot:html-code>
<ul id="custom-css">
<li> aaa </li>
<li> bbb </li>
<li> ccc </li>
</ul>
</template>
</my-code>
</div>
</template>
my-code.vue
<template>
<div class="my-code">
<!-- display the code -->
<component :is="'style'" :name="codeId"><slot name="css-code"></slot></component>
<slot name="html-code"></slot>
<!-- send the code -->
<form method="post" action="https://my-external-service.com/">
<textarea name="html">{{theHTML}}</textarea>
<textarea name="css">{{theCSS}}</textarea>
<input type="submit">
</form>
</div>
</template>
<script>
export default {
name: 'myCode',
props: {
codeId: String,
},
computed: {
theHTML() {
return this.$slots['html-code']; /* The problem is here, it returns vNodes. */
},
theCSS() {
return this.$slots['css-code'][0].text;
},
}
}
</script>
The issues is that vue doesn't turn the slot content. It's an array of <VNode> elements. Is there a way to use slots inside the textarea. Or a way to retrieve slot content in the theHTML() computed property.
NOTE: I use this component in vuePress.
You need to create a custom component or a custom function to render VNode to html directly. I think that will be the simplest solution.
vnode to html.vue
<script>
export default {
props: ["vnode"],
render(createElement) {
return createElement("template", [this.vnode]);
},
mounted() {
this.$emit(
"html",
[...this.$el.childNodes].map((n) => n.outerHTML).join("\n")
);
},
};
</script>
Then you can use it to your component
template>
<div class="my-code">
<!-- display the code -->
<component :is="'style'" :name="codeId"
><slot name="css-code"></slot
></component>
<slot name="html-code"></slot>
<!-- send the code -->
<Vnode :vnode="theHTML" #html="html = $event" />
<form method="post" action="https://my-external-service.com/">
<textarea name="html" v-model="html"></textarea>
<textarea name="css" v-model="theCSS"></textarea>
<input type="submit" />
</form>
</div>
</template>
<script>
import Vnode from "./vnode-to-html";
export default {
name: "myCode",
components: {
Vnode,
},
props: {
codeId: String,
},
data() {
return {
html: "", // add this property to get the plain HTML
};
},
computed: {
theHTML() {
return this.$slots[
"html-code"
]
},
theCSS() {
return this.$slots["css-code"][0].text;
},
},
};
</script>
this thread might help How to pass html template as props to Vue component
I am having a weird issue with my single file Vue component where when I update an unrelated variable (Vue.js variable), all of my inputs (stuff I typed in, not the elements themselves.) disappear.
I have worked with Vue single file components for a few months now and I have never ran into something like this. Here is the weird part, the variable gets updated successfully as expected, but if I include the variable inside of the template at all that is when all the inputs disappear.
The function is looking up 'agents', then letting the user know how many records have been found and whether or not he/she would like to view them. If the user clicks on the "View" link, then they are shown a bootstrap-modal which shows them the records so that they could select one.
Here is what I have already tried:
Removing all ids from the inputs and using only refs="" to get the values.
changing the 'agents' variable name. Thought maybe it was conflicting with some rogue global or something.
Double checked that the parent component and this component was not being re-rendered. I did that by putting console.log() comments in the mounted() function and as expected it is only rendering once.
Watched the key using Vue dev tools extension to make sure the key was not being changed somehow.
Executed the searchAgent() function in a setTimeout(()=>{},5000) to see whether my use of _.debounce was causing issues.
Used jquery to fetch the values from the inputs instead of refs.
Assign the new records to a local variable agentsArray, then pass that into a function which assigns it to the vue variable 'agents' (its basically a needlessly longer route to the same thing but I thought WHY NOT TRY IT)
Double checked all my uses of 'this' to make sure that I was not accidentally using the wrong this and causing some unknown bug.
Using V-model, but using that doesn't help because I would still have to include the 'agents' inside of the modal in the template.
Using a v-if statement to render the modal HTML in the template only after 'agents' is not an empty array.
Update: Based on a suggestion, removed the function from inside of $(document).ready() inside of the mounted() function.
Template:
<template>
<div class="Q mb-0">
<i class="far fa-question-circle"></i>
<center>
<p class="display-1">{{title}}</p>
{{prefix}} is Representing Themselves Skip This Step.
<div id="searchResults" class="hidden" style="margin-top:5px;">
<a id="searchResultsText" class="SkipStepStyle"></a>
<a
id="viewSearchResults"
style="font-weight: bold;"
class="hidden SkipStepStyle"
v-on:click="displayAgents"
>
View
</a>
</div>
<form class="mt-2 BuyerSellerAgentInfo">
<div class="form-row">
<div class="form-group col-md-6">
<input
ref="NameFirst"
type="text"
:name="prefix+'sAgent_NameFirst'"
placeholder="FIRST NAME"
class="AnswerChoice"
:value="currentAnswers[prefix+'sAgent_NameFirst'].Answer"
>
</div>
<div class="form-group col-md-6">
<input
ref="NameLast"
type="text"
:name="prefix+'sAgent_NameLast'"
placeholder="LAST NAME"
class="AnswerChoice"
:value="currentAnswers[prefix+'sAgent_NameLast'].Answer"
>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input
ref="Email"
type="text"
:name="prefix+'sAgent_Email'"
placeholder="EMAIL ADDRESS"
class="AnswerChoice"
:value="currentAnswers[prefix+'sAgent_Email'].Answer"
>
</div>
<div class="form-group col-md-6">
<input
ref="Phone"
type="text"
:name="prefix+'sAgent_Phone'"
maxlength="14"
placeholder="PHONE #"
class="AnswerChoice"
:value="currentAnswers[prefix+'sAgent_Phone'].Answer"
>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input
ref="Brokerage"
type="text"
:name="prefix+'sAgent_Brokerage'"
placeholder="AGENT'S BROKERAGE"
class="AnswerChoice"
:value="currentAnswers[prefix+'sAgent_Brokerage'].Answer"
>
</div>
<div class="form-group col-md-6">
<input
ref="License"
type="text"
:name="prefix+'sAgent_License'"
placeholder="AGENT'S LICENSE #"
class="AnswerChoice"
:value="currentAnswers[prefix+'sAgent_License'].Answer"
>
</div>
</div>
<input
class="AnswerChoice"
type="hidden"
:name="prefix+'sAgent_ID'"
:value="currentAnswers[prefix+'sAgent_ID'].Answer || '1'"
>
<input
class="AnswerChoice"
type="hidden"
:name="prefix+'sAgent_BrokerageID'"
:value="currentAnswers[prefix+'sAgent_BrokerageID'].Answer || '1'"
>
</form>
</center>
<div v-if="agents.length > 0" class="modal" id="AgentPopup">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-body">
<center>
<h5 class="d-inline-block mb-3">Select {{prefix}}'s Agent:</h5>
</center>
<button v-on:click="displayCategories" type="button" class="close shadow" data-dismiss="modal">×</button>
<ul>
<li v-for="agent in agents">{{ agent.NameFull || agent.NameFirst+' '+agent.NameLast }}</li>
<li class="border-0">{{prefix}}’s agent is not in this list</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Script:
import _ from 'lodash';
export default {
name: "AgentInformation",
props: {
friendlyIndex: {
type: String,
default: null,
},
title: {
type: String,
default: null,
},
answerChoices:{
type: Array,
default: () => []
},
currentAnswers: {
type: Object,
default: () => {},
},
prefix: {
type: String,
default: '',
},
token: {
type: String,
default: '',
},
},
methods: {
debounceFunction(func,timer){
let vueObject = this;
return _.debounce(()=>{
vueObject[func]();
},timer);
},
displayCategories(){
$('.categories').show();
},
displayAgents(){
$('.categories').hide();
$('#AgentPopup').modal({backdrop:'static',keyboard:false});
},
searchAgent() {
let vueObject = this;
console.log('calling searchAgent()');
let agentSearchRoute = correctVuexRouteURL(vueObject.$store.getters.routeName('search.agent'));
if (!agentSearchRoute) genericError('Agent Search Route Not Found. Error code: a-s-001');
else
{
let dataObject = {
NameFirst: this.$refs.NameFirst.value,
NameLast: this.$refs.NameLast.value,
Email: this.$refs.Email.value,
Phone: this.$refs.Phone.value,
License: this.$refs.License.value,
_token: this.token,
};
console.log(dataObject);
vueObject.$http.post(agentSearchRoute, dataObject).then((r) => {
let status = r.body.status;
if (status == 'success')
{
vueObject.agents = r.body.agents;
let searchResultsContainer = $('#searchResults');
let searchResultsText = $('#searchResultsText');
let viewSearchResultsLink = $('#viewSearchResults');
let agentCount =
vueObject.agents.length;
searchResultsContainer.removeClass('hidden');
if(agentCount > 0)
{
let rText = agentCount > 1 ? 'records' :
'record';
searchResultsText.text(agentCount+' '+rText+'
found.');
viewSearchResultsLink.removeClass('hidden');
}
else
{
if (!viewSearchResultsLink.hasClass('hidden'))
viewSearchResultsLink.addClass('hidden');
searchResultsText.text('No records found.');
}
}
});
}
},
},
data(){
return {
agents: [],
}
},
mounted() {
let vueObject = this;
console.log('mounted');
$(document).ready(function(){
$('#phone').mask('(###)-###-####');
$('.AnswerChoice').on('input', () => {
let searchAgent =
vueObject.debounceFunction('searchAgent',500);
searchAgent();
});
});
}
}
It seems that the issue is the template does not like the 'agents' variable to be inside of it. When I remove the modal container or just the references to 'agents' it works as expected. If I change the variable name it does not solve the issue.
Any thoughts on the solution? Am I missing something blatantly obvious and stupid?!
Edit: Something I forgot to add, I don't think affects this in any way but it is worth mentioning. This component is rendered dynamically inside of the parent.
Rendering the component:
<component
v-for="(component,i) in selectedView"
:is="component['Component']"
v-bind="bindAttributes(component)"
:key="component.ID"
>
</component>
Changing agents will cause the whole template to be re-run. Not just the bits that mention agents, everything in that template will be updated.
When a user types into one of your <input> elements you aren't storing that value anywhere. You've got a :value to poke the value in but you aren't updating it when the value changes. The result will be that when Vue re-renders everything it will jump back to its original value.
You should be able to confirm this by setting the initial values within currentAnswers to be something other than empty. You should find that whenever agents changes it jumps back to those initial values.
The solution is just to ensure that your data is kept in sync with what the user types in. Typically this would be done using v-model but that's a bit tricky in this case because you're using a prop for the values and you shouldn't really be mutating a prop (one-way data flow). Instead you should use events to communicate the required changes up to whichever component owns that data.
Here is a simple test case to demonstrate the issue in isolation:
new Vue({
el: '#app',
data () {
return {
count: 0,
value: 'initial'
}
}
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<div id="app">
<input :value="value">
<button #click="count++">Click count: {{ count }}</button>
</div>
I've got an 'Album' component that is being used on a page. I am trying to create something whereby only one album can be toggled at a given time. So if an album is already open when clicking another it would close.
Component being mounted recursively in the 'parent' app.
<album v-for="(album, index) in albums"
:key="index"
#expand="setAlbumContainerHeight"
#action="removeFromCollection"
:albumDetails="album"
page="collection">
</album>
The component itself.
<template>
<div v-on:click="toggleExpand" ref="album" class="album">
<img class="album-artwork" alt="album-artwork" :src="albumDetails.cover_url">
<div ref="expandContent" class="expanded-content">
<div class="left-block">
<div class="title">{{ albumDetails.title }}</div>
<div class="artist">{{ albumDetails.artist }}</div>
<!-- Search page specific -->
<div v-if="page === 'search'" class="info">{{ albumDetails.year }}<br> <span v-for="genre in albumDetails.genre"> {{ genre }}</span><br> {{ albumDetails.label }}</div>
<!-- Collection page specific -->
<div v-if="page === 'collection'" class="info">{{ albumDetails.year }}<br> <span v-for="genre in albumDetails.genres"> {{ genre.genre }}</span><br> {{ albumDetails.label }}</div>
<!-- Search page specific -->
<button v-if="page === 'search'" v-on:click.stop="addToCollection" class="add-collection">Add to collection</button>
<!-- Collection page specific -->
<button v-if="page === 'collection'" v-on:click.stop="removeFromCollection" class="add-collection">Remove from collection</button>
</div>
<div v-if="page === 'search'" class="right-block">
<div class="a-side">
<p v-for="track in albumDetails.track_list_one" class="track">{{ track }}</p>
</div>
<div class="b-side">
<p v-for="track in albumDetails.track_list_two" class="track">{{ track }}</p>
</div>
</div>
<div v-if="page === 'collection'" class="right-block">
<div class="a-side">
<p v-for="track in trackListOne" class="track">{{ track.track }}</p>
</div>
<div class="b-side">
<p v-for="track in trackListTwo" class="track">{{ track.track }}</p>
</div>
</div>
<img class="faded-album-artwork" alt="faded-album-artwork" :src="albumDetails.cover_url">
</div>
</div>
</template>
<script>
module.exports = {
name: 'Album',
props: ['albumDetails', 'page'],
data: function () {
return {
expanded: false,
expandedContentHeight: 0,
trackListOne: [],
trackListTwo: []
}
},
mounted() {
if (this.albumDetails.tracks) {
this.getTrackListOne(this.albumDetails.tracks);
this.getTrackListTwo(this.albumDetails.tracks);
}
},
methods: {
toggleExpand() {
if (!this.expanded) {
this.expanded = true;
this.$refs.expandContent.style.display = 'flex';
this.expandedContentHeight = this.$refs.expandContent.clientHeight;
let height = this.$refs.album.clientHeight + this.expandedContentHeight;
this.$emit('expand', height, event);
} else {
this.expanded = false;
this.$refs.expandContent.style.display = 'none';
let height = 'initial';
this.$emit('expand', height, event);
}
},
addToCollection() {
this.$emit('action', this.albumDetails.cat_no);
},
removeFromCollection() {
this.$emit('action', this.albumDetails.cat_no);
},
getTrackListOne(tracks) {
let halfWayThough = Math.floor(tracks.length / 2);
this.trackListOne = tracks.slice(0, halfWayThough);
},
getTrackListTwo(tracks) {
let halfWayThough = Math.floor(tracks.length / 2);
this.trackListTwo = tracks.slice(halfWayThough, tracks.length);
},
},
}
</script>
<style scoped lang="scss">
#import './styles/album';
</style>
The component itself is storing its state with a simple 'expanded' data attribute. Currently this means that the component works nicely when a user is opening and closing each album, however, problems occur when they are opening several at a time. Due to absolute positioning I am manually having to set the height of the container. The aim is to have only one open at a time. I am having trouble thinking of a way to store and track what album is currently open - I'm also unsure how the parent can manage the stage each album / open and closing them where. Even if I know which album is open in the parent how can I trigger individual child components methods?
I've tried to be as clear as possible, please let me know if there's anything else I can make clearer.
I'm not quite sure what you mean by recursive, as far as I can see you're not referencing the album component within itself recursively.
I'd go with this approach:
expanded is a property of your component.
On a click the component emits a this.$emit('expand', albumID).
In your parent you listen for the #expand event and assign your expandedAlbumID to the event payload.
The last remaining piece of the puzzle is now to pass your expanded property like :expanded="expandedAlbumID == album.id"
Full working example: https://codesandbox.io/s/o5p4p45m9