Posts

Showing posts with the label Vue.js

Donate

Vue 2 Charts (vue-chartjs v4) Not Working In Quasar Framework Project Version 1x

Image
Hello, We have a new sprint to work with that is to add metrics module to an existing project with tabular and charts. Since this is a legacy version of Quasar project, we need to add an old version of charts plugin also. There were lots of chart plugins to choose from but the team had the experience working with chart.js before in ASP.NET MVC projects and so we opt to select vue-chartjs as such. However, getting the plugin to work with the legacy Quasar project is a pain in the butt. I had to research in the forums and stackoverflow to make it work since the commands to install vuechart-js does not work on our app. After researching and experimenting for several hours, I came up with the solution that is to specify the versions of vue-chartjs and the chart.js during installation npm i vue-chartjs@4.1.2 chart.js@3.9.1 . After that, we can now fully utilize the features of vue-chartjs v4. The Quasar project that we are working has the following versions: Quasar: 1.2.2 Vue.js: 2

Debugging Quasar Framework Applications Using Visual Studio Code (VS Code) Editor

Image
Hello, I was recently assigned and trained to work on future sprints for an existing project using Quasar Framework/Vue as Front-End and ASP.NET Core API as the back-end. Given that the project has been established for a couple of years now and has been significantly updated by the developer/architect in the US, learning through this involves sharing is caring, debugging and stepping through the code itself. With the goal at hand, I did some research on how to debug Quasar projects using the Visual Studio Code editor. After a few hours, I managed to debug the application based from the provided steps below. 1. Create a launch.json file if you have not do so. To create a launch.json file, click the Debug button on the left side of the editor and click 'create a launch.json file' link. This will create a launch.json file inside .vscode folder. 2. Replace the configurations object properties in the launch.json file with the settings below. Make sure to change the port of th

Async Fetch Not Working When Retrieving Data From JSONPlaceholder API In JavaScript And Vue.JS

Image
Hello, I was trying to retrieve data from a Free Fake API website called JSON Placheholder using the code below which using asynchronous behavior. However, this does'nt return data after all. async getDataAsync(){ try { let response = await fetch( 'http://jsonplaceholder.typicode.com/todos' ); console.log(response.data); this .todos = response.data; } catch (error) { console.log(error); } After doing some research, I came up with a solution and replace the code above using JavaScript Promise as a means to retrieve data from the Fake API website in an asynchronous manner. await fetch( 'http://jsonplaceholder.typicode.com/todos' ) .then(response => response.json() ) .then(data => { this .todos = data; }) . catch (error => { return Promise.reject(error); }); } Cheers!

Axios.Get HTTP Client Not Returning Data From API In Vue.js

Image
Good day! I was following a tutorial on how to create a simple tutorial on how to create a Todo List project that retrieves data from a dummy API website in Youtube using the Axios HTTP Client Library. However fetching the API data from jsonplaceholder.typicode.com using Axios get() method does'nt return any results and the browser just rendered the white screen of death. After reading through my code thoroughly, I noticed that I have misplaced the created event inside the methods property which is the culprit of the issue. export default { name: 'home' , components: { Todos, Header, AddTodo }, data(){ return { todos:[], } }, methods:{ deleteTodo(id){ console.log(id); axios. delete (`https: //jsonplaceholder.typicode.com/todos/${id}`) .then(res => { this .todos = this .todos.filter(todo => todo.id !== id) return res }) . catch (error => {

Donate