I'm currently working on a project that involves Vue JS within a Laravel Project
Can someone guide me on how to fetch data from another JS file?
Here's what I have so far:
MainComponent.vue
data() {
return this.getData()
}
DataComponent.js
module.exports = {
getData() {
variable1: [],
variable2: []
}
};
I'm not sure if I'm doing this correctly, so any help would be appreciated. Thank you!
Uncertain of your intentions, but perhaps this solution can offer some assistance:
MainComponent.vue
import { _data } from './DataComponent'
data() {
return _data
}
DataComponent.js
export const _data = {
var1:[],
var2: []
}
It is essential to export a JavaScript module and then import it within a Component as shown below:
Test.js
module.exports = {
getData() {
variable1: [],
variable2: []
}
};
MyComponent.vue
import { obj } from 'your_js_file_path/Test'
Subsequently, you can utilize it, for instance, inside a certain method.
obj.getData();
Currently, I am working on an MVC 5 application where I am attempting to utilize a script to toggle the visibility of buttons in each row based on data retrieved from a database using Ajax. function setButtons() { $('#MyList > tbody > ...
I'm looking to create a function in React JS that changes the button's color when clicked. Specifically, I want the color of the button to change upon clicking. I have attempted to achieve this using the following code: {"classname" i ...
Currently seeking a reliable method to serve videos through Google Cloud Storage that is compatible with all browsers, including Apple devices. I am facing challenges trying to play videos on my website (Vue front end, node.js backend) that are stored in ...
I am facing an issue with my parent component attempting to invalidate the query cache of a child component: const Child = () => { const { data } = useQuery('queryKey', () => fetch('something')) return <Text>{data}& ...
Currently, I am developing a cart application in Angular and utilizing Angular Bootstrap. The main requirement is to display a tooltip when hovering over the cart icon, with the content of the tooltip changing based on whether the item is already in the c ...
I have implemented a jQuery Ajax function to check the availability of a username in real-time from the database. If the username is not available, the response is marked as "Unavailable" and vice versa. While I am successfully receiving this response, I a ...
I am working on a webpage that includes an <img src="..." /> tag with a default src set. My goal is to use jQuery to make an ajax request to fetch another image, and only once this new image has fully loaded, update the src attribute of the <img ...
I'm facing an issue with sending form values to a script. My goal is to have the form values displayed on another part of the page when the user clicks a button. While I can achieve this using PHP or similar web scripting languages by sending the valu ...
Looking to create a unique custom tooltip with a semi-transparent background that can overlay a map. The process involves drawing the MapView first, then upon pressing a marker on top of the MapView, an overlay with a background color of "#00000033" is dra ...
I have a task where I need to insert various Ids into a single video input tag. Specifically, I need to include the player and its row ids from PHP in this format: <video preload controls playsinline id="player[<?php echo ''.$row5['id ...
Currently, I am utilizing the apollo-express server with GraphQL. One issue I am encountering involves a mutation where I pass files from the front-end to the back-end. Strangely, I receive the file:{} object only for the first file - for the others, I rec ...
My current challenge involves working with rxJS and handling bulk HTTP requests from a database containing over 1 million documents. The code I have is relatively simple. I am pushing all the documents from the collection into an array called "allPlayers" ...
Looking to dynamically insert a form on a page based on the value selected from a datalist, all without having to reload the entire page. <form action='#' method='get'> <input list="category" name="category"> <da ...
In my controller, I am loading content using ajax and want a spinner to appear while it's loading. The code snippet is as follows: <i class="fa fa-2x fa-spin fa-spinner" ng-show="isLoadingContent"></i> Accompanied by the following JavaSc ...
I am working on creating marker pop ups that display information from different ajax requests on a map. In order to make the second call, I utilize an userID obtained from the first call. While the information from the second call is displayed correctly, ...
After learning how to defer the loading of JS libraries and a document ready function from this post, I encountered a challenge. The code I currently have handles multiple document ready functions inserted by different modules, not on every page. echo&ap ...
I tried to create a chat application using node.js and react.js. However, I'm facing an issue where clicking the button on my page refreshes the entire page. As a beginner in web development, please forgive me if this is an obvious problem. You can fi ...
When working with the code snippet below to send a list of values to another component - React.createElement("ul", null, this.state.stock.map(function (value){ return (React.createElement(Price, { price: value })) }) ) the values are then sent t ...
Seeking guidance on setting up a dynamic dependent dropdown list using node js, mongoDB and Vue js. As a newcomer to this concept, I'm unsure where to begin. Here is the scenario I am facing: I need assistance in creating 2 dropdown menus for country ...
I've been diving into cannon.js and encountering the following error: Uncaught TypeError: CANNON.NaiveBroadPhase is not a constructor. I've tried numerous solutions but none seem to be working. Here's a snippet of my script: var scene, came ...