I am attempting to utilize VueJS to display a LocalStorage value in my HTML, but I'm encountering difficulties retrieving the value.
The error message I'm seeing is
Uncaught (in promise) ReferenceError: currentCategory is not defined<h3 class="meal-title">Recettes de {{ this.currentCategory }}</h3>
var categoryStorage = JSON.parse(localStorage.getItem("currentCategory"));
data() {
return {
meals: [],
categories: [],
currentCategory: currentCategory
}
},
Here's something you can try out:
<h3 class="meal-title">Recipes for {{ chosenCategory }}</h3>
export default {
data() {
return {
meals: [],
categories: [],
chosenCategory: null,
};
},
// mounted
mounted() {
this.chosenCategory = JSON.parse(localStorage.getItem('chosenCategory'));
},
};
It's important to assign the value of categoryStorage to a variable called currentCategory.
Check out this interactive demonstration:
var categoryStorage = 'B'; // Retrieve value from local storage
new Vue({
el: '#app',
data() {
return {
items: [],
sections: [],
currentSection: categoryStorage
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h3 class="section-title">Items in {{ currentSection }}</h3>
</div>When I click the update name button, the state is not changing properly using setState. I want to update the persons variable and have it reflect in the DOM as well. Any ideas on how to achieve this? App.js import React, { Component } from "react"; impo ...
I am currently working on a unique script designed to create a custom number of slices for a circle. The items in the circle are being displayed as shown in this generated circle image. This is the Javascript code I have been using: for () { men ...
Recently, I've been delving into the world of React and stumbled upon the concept of hydration. Unfortunately, I'm a bit confused about how it operates. Can anyone provide some insights? Thank you in advance. While working on my React app, I enc ...
I am working on a functionality where multiple divs should be displayed or hidden based on the button clicked. Initially, all buttons and divs are visible. Upon clicking a button, only the corresponding div should be visible. Subsequent clicks on other but ...
Is there a way to automatically expand a select menu dropdown using JavaScript or jQuery when a button is clicked? I am facing this challenge because I have a text field that allows users to input custom fields dynamically into a select input. My goal is ...
Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...
In my mongodb collection testdata, there is a field named insertTime. Our goal is to remove data older than 60 days. Previously, to accomplish this, I would use the logic of finding the deletion date and then comparing it against the updateTime: var date = ...
I've encountered some challenges when attempting to extract Javascript values from a bs4 code. The javascript snippet appears like this: <script type="text/javascript"> var FancyboxI18nClose = 'Close'; var FancyboxI18nNext = 'Ne ...
Hi there, I'm curious about how Vue routing and the tree structure work together. In my setup, I have a parent router that contains both my router-view and header at the same level. I want to be able to trigger some functions from my header component ...
I have a query regarding my protractor conf.js file. The onPrepare function in it needs to include an http request that is structured like this, onPrepare: function(done) { request.get('http://pepper/sysid') .end(function(err, resp){ ...
I started with the guidance provided in this post, which was successful. To investigate why it's not functioning, I made a JsFiddle but couldn't figure out the issue. Even when trying to search for results using the first letter of the last name ...
Attempting to rewrite a Physi.js example in my own style has been challenging. The gravity feature doesn't seem to be working properly, even though the render loop is functioning correctly and constantly firing. You can view what I have so far here: ...
Working on a project with nodejs and Express framework, I am looking to incorporate Bootstrap locally. I have included the following in the <head> of my index file: <script language="javascript" src="../node_modules/bootstrap/dist/js/bootstrap.mi ...
I am facing an issue with implementing drag-and-drop functionality using v-chip elements and a form. My goal is to enable users to drag any chip and drop it into the form so that the input field in the form captures the value of the dropped chip. Here is ...
On my home page (homePageComponent), I have a search feature. When the user clicks on the search button, they are redirected to a different page called the search list page (searchListComponent). Within the searchListComponent, there is another component c ...
I'm trying to create a dynamic Bootstrap popover with HTML content when hovering over a button. Here's what I have so far: $(".btn.btn-navbar").hover(function() { html = '<ul class="nav"><li><a href="#">hello</li>& ...
I'm currently working on a jQuery function that is acting as a select-all option. Everything is functioning correctly except that when I deselect any of the child elements from select all, the option remains enabled. My goal is to enable or disable th ...
Having trouble adding some unique styling to a jsx component. The code snippet below is throwing an error when compiled. import Card from "./card"; export default function CardRow(){ return( <> <div> <Card> ...
I have a query regarding data binding in vuejs, and I am hopeful that the community here can assist me in resolving this issue. I am currently learning how to use vuejs with laravel. I am encountering difficulties in establishing data bindings during the ...
I am facing an issue with three components interacting and I need help in properly bundling them together. There is dynamic configuration on the page that exists within an inline script A static script located in the public folder which utilizes the dynam ...