VueJs Understanding v-model and v-on:click - javascript

I'm currently trying to learn VueJS coming from a jQuery background and I've run into something that I either don't understand or trying to do wrongly. I'm using VueJS and Laravel. I add VueJS to my blade templates.
I have table set up with a few rows of data. In those rows I have a text input field. Each row also contains two icons that allow me to move the row up or down.
When I click on the icon I want to send a axios request telling my database to update the order field. When it returns a success message I want to reload the table with the new order.
After clicking the v-onclick icon and reloading the table into my div with an axios get the v-onclick stops working. Also the v-model binding that I've set up also stops working. When I update a value in a text input it no longer updates the value in the data property.
I've added a jsFiddle to give an idea of what I'm trying to accomplish.
I use axios to get a route that returns the products table view.
```reload : function(){
url = '/products;
axios.get(url).then(response => {
document.getElementById('products').innerHTML = response.data;
});
},```
https://jsfiddle.net/k8Lj4asb/1/

This is not the proper way to update a table in VueJS. By manipulating the DOM directly, you perform changes to the site that Vue doesn't track (and hence doesn't know about), which breaks reactivity.
The proper way to do this would be to store your list in a Vuex-Store and perform the update in there. I recommend reading up on the topic using the excellent documentation provided here: https://vuex.vuejs.org/

I would pass the object of products to javascript, Laravel has a package for this https://github.com/laracasts/PHP-Vars-To-Js-Transformer by Jeffrey Way.
Edit: oh cancel that, it looked from your broken fiddle you were trying to do something different.
In your axios response handler just update a data property for products with the response data. Then loop that property in VUE, no PHP side loop required.
<td v-for="product in products">
<input v-model="product.id" type="text" :name="product.name">
</td>

Related

How can I show different divs dynamically based on an ID received from an API response

This is my first time posting on stackoverflow!
I'm currently in the process of building a sort of social media webapp. I just started on the notifications page of the webapp. My issue is that different notifications have different templates. So while some notifications may include an image, other notifications do not. I've had success displaying a feed by looping through a JSON array with the id as the key, but I don't think I can do that with the notifications pane. Each notification has its separate ID, so looping through them isn't the issue. My main issue is that each notification has its own type attribute, and I want to display different div templates depending on the type, while looping through the JSON using the ID.
For clarification, I'm using the quasar cli for vue.js.
I'll attach my code for the loop below for some context.
Any help would be appreciated. I tried searching for this issue and found nothing, though that maybe an issue of me not knowing how to search properly.
<q-card
class = "no-padding"
style = "height: 150px;"
v-for = "event in joinedEvents"
:key = "event.id" flat>
Basically, I want to be able to have the display an image if the notification type is 1 or display button if it is 2.
Thanks in advance!
You can make use of dynamic component feature of vue js, define your notification templates and then based on identifier set them dynamically, by using this method you can use single model for as many templates you want
Template structure will be like this
Components
Notifications
Template A
Tempalte B
Template C
---- etc.
In vue just model component make use of
<component :is="myDynamicComponent" :data="myDyanmicDataForComponent" />
Whenever you receive notification just set the template and data then make it visible.
Here is a working example:
https://codesandbox.io/s/vue-dynamic-template-example-gwt9d

Auto save data with Node.js

Right now I'm building a team based project with Node.js/MySQL/React and have been stuck at a ToDo list part. I would like to know what is the recommended or fastest way how to save data or options to database automatically and without any submit button on each row.
Todo item
You could do a single POST when adding a new row, and whenever you change the options you could do a PUT request, but as a general design rule I'd advise against it : you want to be able to review all your changes before committing them to the database, plus this requires a lot more requests, hence more controllers rather than just having one.
Looking at your screenshot why don't you have a single submit button at the bottom of the table ?

Creating breadcrumbs for table navigation VUEJS

I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!

Refreshing Angular view after changing a value

Because the page I am working on is a legacy page with lots of dead/living/zombie code I am unable to paste it whole here. So I am trying to post a digest of my issue with sample code.
I have a page in which data comes from Angular. It is a bunch of products. Each product has an attribute named showProduct that determines it should be shown or not. The showProduct attribute is set to 1 when it is first fetched from the backend. While rendering the html, in each product div I have
ng-show={{product.showProduct}}. The ng-show works correctly the first time when its loaded, all products are shown. If from the backend I set this to 0 for any product, it is hidden.
Once the products are loaded, if the user clicks a button, I need to hide some of those products. This button click handler is in jQuery.
So I do the following:
prod = angular.element($('#product-section')).scope().ProductList;
prod is now an array of products with their attributes. Now I iterate through this array, check for the attribute in question (which I know based on what button was clicked) and based on its value for each product, I set a showProduct attribute to 0.
However this does not update the view, to hide that product. If I console.log the angular.element($('#product-section')).scope().ProductList, I can see that its showProduct has correctly been update from 1 to 0.
I am assuming that there is something I need to do in order to make the productList be "re-parsed" and refreshed in the page. However I am not sure how to do this.
I just needed some conceptual tips on what I might be missing, because I understand that providing "specific" code tip for my situation is difficult.
In a nutshell, once I have updated the angular value externally, how do I tell Angular to reparse the code and refresh the view? Something like how it happens automatically for models when updating data in a textbox...
I tried doing angular.element($('#product-section')).scope().$apply(); but that did not work.
Any pointers are greatly appreciated.
Try this:
$scope.$apply(function() {
angular.element($('#product-section')).scope().ProductList;
});
By doing this, you're telling AngularJS to watch what your enclosed code is doing and update the view accordingly.
Just some consideration: wouldn't you be able to just update the model directly instead of invoking an external code? This approach is always recommended.
Angular uses two way data binding, which works, when you use an Angular-Controller (or Directive, etc), in which you define your model. In your HTTML you use something like this (very crude example):
<div ng-controller="myProductListController>"
<div ng-repeat="(index, product) in productList">
<div>{{ product.name }}</div>
</div>
</div>
productListis in your myProductListController and is available in the scope (your model) of your ng-controller directive.
Now, each time the productList changes in your controller, your view will update automatically.
Scopes (models) are bound to some Angular-Controller (or Directive, ...). So you need to have that, in order to use two-way-binding here.
Hope that helps

Jquery Mobile - Update List Row containing images, text !

I am new to Jquery!
I am trying to load a list dynamically, without the page being refreshed. I will be getting data(parsed) from an array which i have to load in the list dynamically.
Its basically a contact list with Chat icon, Username, Presence or status, and Custom message which are part of the list.
Kindly share any code snippet or example which would help me in accomplishing this task quickly
Tx !
Well, make the ajax call, update the html, then call refresh() on the list per the docs. That would be the first thing I would try.
Updating lists
If you add items to a listview, you'll
need to call the refresh() method on
it to update the styles and create any
nested lists that are added. For
example, $('ul').listview('refresh');
We're currently working on a few
improvements to the refresh method, so
keep your eye on Github for updates.
http://jquerymobile.com/demos/1.0a4.1/docs/lists/docs-lists.html

Categories

Resources