Trying to access a data property inside setup() in Vue 3 is resulting in the following error:
TypeError: Cannot read property '$localStorage' of undefined
data()
data() {
return {
$localStorage: {},
}
setup
setup() {
this.$localStorage
}
Is there a way to correctly access this property within setup()?
To effectively access data in Vue, one approach would involve importing the getCurrentInstance function and utilizing it within the onMounted lifecycle or within a consumable:
import { onMounted, getCurrentInstance } from "vue";
export default {
data() {
return {
key: "test",
};
},
setup() {
onMounted(() => {
console.log(getCurrentInstance().data.key);
});
},
};
Nevertheless, this method is not recommended as indicated here.
Alternatively, you can define the data property in setup using ref or reactive like so:
import { ref } from "vue";
export default {
setup() {
const $localStorage = ref({});
},
};
or
import { reactive } from "vue";
export default {
setup() {
const $localStorage = reactive({});
},
};
These solutions are suitable when the data and setup function are within the same component.
If you need to access a child component, you can utilize ref for this purpose. More information on ref can be found here
Ensure to always return the property in the setup method if you are not using it
<script setup></script>
Refer to the Official Documentation
<script>
import {ref} from "vue";
export default {
name: "Demo",
data: () => ({
$localStorage: {}
}),
setup() {
// ensure it is reactive
const $localStorage = ref({})
// Don't forget to return the property
return {$localStorage}
}
}
</script>
After clicking on a pagination link (page number), the post_type, taxonomy, and term_name are retrieved. Using JQuery Variables, these variables are passed to an Ajax WordPress function. Although the Ajax function successfully receives the variables, the W ...
I am currently testing file uploading in my backend system. I am using Postman to send binary data as a file in the request body, and now I need to extract this data from the POST request. req.body The above code snippet returns a binary buffer that look ...
Having trouble getting my slider animation to work. I've tried different CSS styles but the slide transition is not functioning as expected. When one of the buttons is clicked, I want the slide to change from right to left or left to right. Can anyone ...
Interested in utilizing the d3.js timeknots component, a svg visualization that includes line and circle elements. My goal is to implement a stopwatch animation that dynamically changes the color of the svg visualization over time. I am contemplating crea ...
I have created this code snippet to showcase the issue I am facing. main.php <body> //some html <script> function fx1(){ $(".elem").click(function(){ alert("hello"); }) } </script> //some html again include sub-acc.php & ...
Task: To retrieve and display data based on the current event ID from a JSON file: var _getEventById = function(eventId) { var __findEvent = function(event) { return event.id === eventId; }; return _.find(data.meeting ...
I am currently struggling with the Material UI dialog component that displays information about a location marker. My issue is with disabling the unattractive box shadow that surrounds the component. Despite setting box-shadow: none and trying different so ...
I am currently utilizing axios to send a GET request to the Twitter search API in order to fetch recent tweets that utilize a specific hashtag. To begin with, I ran tests on the twitter search API via Postman and noticed that the id and id_str tweet statu ...
Here is a select field with various options: <select id="sel"> <option value="1">aadkdo</option> <option value="2">sdsdf</option> <option value="3">aasdfsddkdo</option> <option value="4"> ...
This is the start date for my event in the full calendar: start: new Date('2016', '02', '07', 00, 30) However, when loading the calendar, this event is displaying on March 7, 2016. How can I resolve this issue? ...
I am currently testing out the code snippet provided in a beginner's book on Node.js. var http = require("http"); var url = require("url"); function onRequest(request, response) { console.log("request URL is: " + request.url); var pathName ...
I am currently facing a challenge with my constructor function. It is supposed to return several methods, but I'm having trouble using the value from this section of code: var info = JSON.parse(xhr.responseText); Specifically, I can't figure ou ...
I am currently facing a small issue with my code. My goal is to update the 'left' CSS property of certain elements based on the difference between their current left value and the page resize amount. This way, when the background moves with a pag ...
This is a basic HTML/CSS menu. Currently, it is functioning properly for page redirection (href). However, I would like it to hide after being clicked on. I plan to call a function that will initiate an AJAX request upon clicking. Here is the code on JS ...
I am curious to know how to create a dynamic Bootstrap 5 carousel. Specifically, I want to know how to display indicators dynamically and add an active class to the first item of the carousel. In Bootstrap 4, it is done in the following way: $('#main ...
Understanding the Issue I have created a custom system to monitor specific "store" properties from a JSON in a NoSQL database. The structure is fairly straightforward, with nested objects that are necessary for various reasons. The data format resembles ...
After going through the documentation for Vue Router, it seemed like setting up redirects should be straightforward, but I'm having trouble making it work. My first attempt was to reference a file in S3: { path: '/rules', redirect: &ap ...
My goal is to make the columns responsive and adjust based on changes in breakpoint sizes: https://i.sstatic.net/UbgCm.jpg https://i.sstatic.net/rciLy.jpg https://i.sstatic.net/SwscL.jpg I am really struggling to figure out how to implement this logic ...
I have a component that iterates over an array to generate 10 navigation items. I want to implement an onClick method that will add an active class to the clicked item. Are there any best practices using Hooks or the newer React patterns for achieving this ...
Currently, I am immersed in a small project that involves user authentication via email and password before gaining access to their individual profiles. The backend operates on cookies which are established once the correct email and password combination i ...