Hi there fellow developers,
I would like to ask you, if you could help me with an issue I have not been able to resolve. I have made a very simple TODO List App using Vue.js (I know, very original) and I decided to hook it up to Firebase, so that I don't lose all the data after a page refresh. I was able to fetch data successfuly and also delete all the data (if there is any) but I'm not sure, how to send an http request, when I need to delete one particular item when clicking on it. I was able to do this locally with a simple splice method but I'm not quite sure how it works with Axios/Firebase.
Any help would be appreciated.
Here is my code/repo: https://github.com/tomvorel13/vue-task-manager/blob/master/src/App.vue
Thank you!
The best is to use the Fireabase JavaScript SDK for such interaction between your web client and the Firebase database. This is easier and better than using Axios.
Have a look at the documentation:
https://firebase.google.com/docs/database/web/start
and in particular there for learning how to delete an item.
https://firebase.google.com/docs/database/web/read-and-write#delete_data
It is simply a matter of doing remove() on a reference to the location of that data.
In order to integrate the SDK with a Vue.js application, have a look at these very good tutorials:
https://www.youtube.com/watch?v=FXY1UyQfSFw&list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt and in particular videos #13 and following for the Firebase part.
Related
Im learning JS and i builded a simple shopping list (works same like a todo list)
For the first, the list works fine for me, but now i want to upload these on a rented server and want to use the same content from differrent diveses, like writing the list on PC and using or editing it on cell phone. (Login in and stuff, comes later :) )
[Here is my Code on JSFiddle](https://jsfiddle.net/Craddus/5t2w7fp8/4/)
Now i know, that JavaScript doesnt really change documents, so whats todo that these list (items) save online permanent. Can i also do this with JavaScript?
Whats the next steps? Im a complete greenhorn in programming and i dont find a beginning for these solution.
Thanks for your time!
To save list (items) online permanent you have to use php and save everything in database using sql.
I need to build a distributable app using VueJS. I'll describe the scene, so that it can be understood better.
Immagine the following:
Four companies have the same products database
Each of them has it's own politics, prices, custom colors, parameters, all of which are also stored in that database
These 4 companies want to integrate into their relative websites a page which shows their own catalogue (with their custom prices and politics and whatever), as well as, when you click on some of the products, the related information about that product
The question is: how can I make such an app using VueJS? Write it once and distribute it to these 4 different company websites?
And I've started to answer to my question doing the following:
I created an API which can be accessed by API Keys
Assigned to each company its very own API Key, so that requests coming with that API Key are associated with the given company
I created an app using VueCLI (which uses vue-router, for the pages/views, and axios for the API calls as well), wrote all my logic and components and styles and whatever else...and for development purposes I tried to use one of the 4 API keys (hard coding it into the axios.defaults.headers) to see if it all works...and it does!
Now, here comes the problem: I need to build/export the app in such a way that I can do something like this:
In www.company1.com/catalogue
Call catalogue.js and pass it the company1 API key
In www.company2.com/catalogue
Call catalogue.js and pass it the company2 API key
In www.company3.com/catalogue
Call catalogue.js and pass it the company3 API key
... I'll omit the company4 cause i'm sure you already got me.
Obviously I could export 4 different versions with the hard coded 4 different API's...but seems like a pretty stupid idea to me! Also, it exposes my client a lot cause, well, everybody could link to some of the companies' catalogue.js and, without configuration or whatever, visualise on it's own website my clients products..(which is obviously a problem).
I would like to have:
ONLY ONE catalogue.js file with some exposed parameters, as, for example: the API Key needed to identify the company.
In this way, everybody could still use that catalogue.js file, but with wrong credentials, it wouldn't produce a thing (i.e. will get an API error of unrecognized API key).
How on earth am I supposed to do this?
I'm banging my head on the wall from 2 weeks.
I've tried to export the app as Library, get errors like: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I tried to export the app as Web Component...got same error and others as well.
Please help me understand where I go wrong, and how should I approach the problem.
Look into Vue Environment Variables https://cli.vuejs.org/guide/mode-and-env.html
Or you can make independent settings.json file and load it through the axios
I have an issue regarding the script which helps me get the data from Dark Sky API.
I am developing the app in node.js using handlebars.
I am trying to get just some specific data from the forecast script, send it to app.js script which does the page routing and then to add it to forecast.hbs page.
Unfortunately, I am really stuck on this.
I have attached the photo with the code.
What I want to do is to get just some specific weather data, so, later on, I can use them one by one in the HTML code.
I have somehow to add them in the callback(right side), then in the middle, where the forecast routing is, then I think I need to replace forecastData with something else like..more variables and add those in the rendering part?
For example, I would like to take the icon variable, which contains the code that I need to add in the hbs page.
I want to do some binding by replacing Skycons.RAIN with Skycons.{{icon}}, where the icon should be in the middle file, like forecast: forecastData.
If I'm using {{forecast}}, I can show all the data that is on the right side, more exactly the variable weatherDetails, which contains the other variables.
How can I take advantage of binding and use it for the icon, for example?
Can somebody give advice, please?
I am really confused...
Kind regards, Gabriel
Why don't add an additional parameter to the callback function and then add it to the handlebars data object? Then you should have access to it in the template.
Btw are you using nodemon with docker? I'm also stuck with a problem, where nodemon isn't updating the container when the files are changed.
I am writing an application to list or update users using Javascript. I have enabled the relevant API's in dev console. This all works ok if I use AdminDirectory.Users.list, however when I try to get a single user via AdminDirectory.Users.get and pass the google ID as the key, I get Login Required.
I have tried to add option .viewType = "domain_public" but to no avail.
For now, Im going to re-write the local function that uses .get to get the user via list, but would like to know if anyone else has this problem or know how to fix it.
I ran into the same issue when I tried to write a custom function to retrieve the users in our directory. After reading Paul's comment, I checked and found that custom functions operate with same minimal permissions, so I also added a custom menu to load the users.
At risk of giving advice without testing it myself: for triggers, you'll need to use an event with an authMode value of FULL.
See the Google Apps Script Event Objects guide.
i'm new to web tecnologies, and i'm trying to make some stuff work. I have 2 similar html pages, with the same table on them.
I have to make sure that every data inserted in the first table (editable) is replicated in the same cell of the second table (of the other HTML page).
HTML code I used is really simple, I've added some style with CSS and 3 functions with JS (add, delete and modify row). I have to replicate these changes to rows too.
I'm a bit confused, I think I have to manage this thing with a server application, maybe in php, but i don't know how to start.
I've searched this site, but I didnt find anything useful, for now.
How can I approach this problem? I want to learn these things, I am not asking you for having working code and easily solve the problem...
Thanks to everybody in advance.
You need to store the data somewhere (database, local storage, cookie, file, etc.), and read it when page loads.
The most common way is to store the data in database.
When your page loads, get the data from the database and build the table.
This is a good place you can start learning how to work with MySql database: http://www.w3schools.com/php/php_mysql_intro.asp
Angular JS library will be a simple solution to your problem.