Vue Js Table

Posted on  by admin

vue js radio button on change event example. In this tutorial, you will learn how to get checked the radio button value in vue js app with v-model. This tutorial will guide you step by step on how to get selected radio button value using onchange event in vue js.

As well as, will make a simple example of how to get checked radio button value in vue js app.

Paginating Our Data

Note that, this tutorial will take very easy and simple, will take 2 radio buttons first one is male and second one is female option radio buttons.

When a user selects it. Get selected radio button text and value using on change event value vue js.

How to Get Selected Radio Button Value in Vuejs

Just follow the following steps and learn how to get checked radio button value in vue js app with v-model:.

Step 1 – Create New VUE JS App. Step 2 – Create Component.

Step 3 – Add Component on App.vue. In this step, open your terminal and execute the following command to create new vue js app:.

In this step, visit /src/components directory and create a new component called radio-event.vue and add the following code into it:.

In this step, visit /src/ directory and App.vue file.

And then add the following code into it:. vue js radio button on change event example.

In this tutorial, you have learned how to get checked radio button value in vue js app. Recommended:-Vue Js For Loop (v-for) Example Tutorial.

Recommended:-Vue JS – Add Class To Element On Click Tutorial Example.

Recommended:-Vue JS – Google Map Integration Example.

Recommended:-Vue Js Login and Registration Example. Recommended:-Vue JS Image Upload Preview Example. Recommended:-Vue Js Google Line Charts Tutorial Example.

Recommended:-Laravel 8 Vue JS Post Axios Request Tutorial. Recommended:-Laravel 8 Vue JS File Upload Tutorial Example.

Recommended:-Laravel 8 Vue Js Infinity Page Scroll Example. Recommended:-How to implement Datatables with Vuejs And Laravel 8.

Recommended:-Laravel 8 Vue Js Drag & Drop Image Upload Using Dropzone.

Recommended:-How to make dependent dropdown with Vue.js and Laravel 8. Recommended:-Vue JS And Laravel 8 Like Dislike Tutorial Example.

Conclusion

Recommended:-Laravel 8 Vue JS Full Calendar Tutorial Example.

This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15.8. You must have Visual Studio installed and the Node.js development workload.

If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free.

If you haven't already installed Visual Studio 2017, go to the Visual Studio downloads page to install it for free.

If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer.

Choose the Node.js development workload, then choose Modify. You must have the Node.js runtime installed. If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.

Node.js is built for 32-bit and 64-bit architectures. The Node.js tools in Visual Studio, included in the Node.js workload, support both versions.

Only one is required and the Node.js installer only supports one being installed at a time. In general, Visual Studio automatically detects the installed Node.js runtime. If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page (after you create a project, right-click the project node, choose Properties, and set the Node.exe path).

You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website.

For more information, see the prerequisites. Open Visual Studio. Create a new project. Press Esc to close the start window. Type Ctrl + Q to open the search box, type Basic Vue.js, then choose Basic Vue.js Web application (either JavaScript or TypeScript).

In the dialog box that appears, type the name basic-vuejs, and then choose Create. From the top menu bar, choose File > New > Project.

In the left pane of the New Project dialog box, expand JavaScript or TypeScript, then choose Node.js.

In the middle pane, choose Basic Vue.js Web application, type the name basic-vuejs, and then choose OK.

If you don't see the Basic Vue.js Web application project template, you must add the Node.js development workload.

The Game Plan

For detailed instructions, see the Prerequisites. Visual Studio creates the new project. The new project opens in Solution Explorer (right pane). Check the Output window (lower pane) for progress on installing the npm packages required for the application. In Solution Explorer, open the npm node and make sure that all the listed npm packages are installed.

If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages. Take a look at Solution Explorer in the right pane. Highlighted in bold is your project, using the name you gave in the New Project dialog box.

On disk, this project is represented by a .njsproj file in your project folder. At the top level is a solution, which by default has the same name as your project.

A solution, represented by a .sln file on disk, is a container for one or more related projects. The npm node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box.

If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

In Solution Explorer, right-click any folder such as the src/components folder, and then choose Add > New Item.

Select either JavaScript Vue Single File Component or TypeScript Vue Single File Component, and then click Add.

Visual Studio adds the new file to the project. Next, choose Build > Build Solution to build the project. Check the Output window to see build results, and choose Build from the Show output from list.

(TypeScript project only) From Visual Studio, choose Build > Clean Solution. Next, choose Build > Build Solution to build the project. Check the Output window to see build results, and choose Build from the Show output from list. Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. In the console, you see a message Starting Development Server.

Then, the app opens in a browser. If you don't see the running app, refresh the page. Close the web browser. Blogs, E-commerce sites, admins, and search results, almost everywhere you go online you are presented with large amounts of data and results, this transfer of information is a big part of what web applications are about.

In this article we are going to take a look at how you can make your application dynamic by allowing your users to sort and navigate the data you are showing them using Vue.js.

We are going to be building a reactive table like in the picture above, but before we get down to the build, I find it helpful to break down the problem into smaller more specific tasks or features. We want our table to receive data in JavaScript and fill in the table’s HTML automatically.

We want to be able to sort our table by column. We want to be able to paginate our data.

Leaning on the reactivity of Vue.js you will see how easy it is to make a reusable table that adapts to the data you provide it.

So without further ado, let’s get right into it. First things first, before we can start making the table dynamic, we need to create the table itself.

The data we will be using is a list of users with the columns: id, name, phone, and profession.

Sorting Our Table

The simplest way to render our data using Vue.js is by using the v-for directive to iterate an HTML template over a list. You can see in terms of JavaScript, we don’t really have anything except the definition of the data where we have the list of users.

By using the built in v-for we are able to iterate over the data and already dynamically display our results. The main problem with the above code is that it is tightly bound to the specific data we used.

If the data changes you will need to update the template along with it. We can take this one step further and define the columns in the data field of our component, or better yet, if your data all follows the same format, you can let Vue.js read the keys itself (how meta of us).

Iterating over the columns is exactly like how we iterated over the rows in the previous example, and now when we iterate over the rows, for each row we iterate on all its columns.

By using v-for inside a v-for we not only shortened our template significantly but made our Vue.js table a more lot adaptable to any data you throw at it. It is generally a good idea to remove any tightly bound links between your data and template when building something where the data can change. Sorting the table is a lot simpler than you may think.

Traditionally, this involves sorting the data itself and then re-rendering the HTML, all the while keeping track of click events on the columns and sorting direction.

Vue.js takes care of a lot of it for us—by just updating the underlying array of users, the table will react automatically.

Let’s start simple and just have the data sort itself when clicking on a column.

To do this we need to add a click event to the column’s headers which when clicked will sort the data accordingly. We add the click event handler by using the v-on:click directive in our template on each element that calls a method called sortTable, passing the column with which to sort the data.

The actual sorting is done using JavaScript’s built in sort method in which you specify a closure that receives two elements from the array, and has to return -1, 0 or 1 based on whether the first value is smaller, equal to or bigger than the second value respectively.

Now playing with the table, you can see this is pretty cool, but only sorts in one direction. To sort in the other direction, the closure we pass to the sort method needs to return 1 where we returned -1and visa versa, essentially flipping the order.

To accomplish this we need to keep track of which column we are currently sorting by, and in which direction to sort – ascending or descending.

So let’s go ahead and add these two fields to our dataobject and update the sort method.

Bi-directional sorting, now we are getting somewhere; we have already implemented all the logic needed to sort the table, but it would be nice to be able to have some indication as to what is being sorted, and how.

If you think about it logically, what we want to do is add something to indicate whether we are sorting in ascending or descending order to a column, if we are currently sorting by that column.

Vue.js has a built in directive v-if that accepts an expression and only adds the HTML element to the page if the expression is evaluated true. So we add an element to the th element for the column which is currently being sorted, and then we give our indicator element the class arrow_up or arrow_down based on the ascending field in our Vue.js component using another directive v-bind.

The v-bind directive allows you to reactively bind a value to any attribute or property of an HTML element.

For example you can use v-bind:href to bind a url dynamically to an element. The advantage to using v-bind is that whenever the underlying data used in the expression is changed the attribute will be automatically updated.

In terms of HTML, or the sorting functionality we just added, displaying a paginated table is no different than displaying a full table.

The only real difference is you only want to display a subset of the array of data. The question is, just how do you want to split up your data?

If you know what page you are currently on and you know how many results you want to display per page, you can take a slice out of the full array and iterate over it instead of iterating directly over all rows.

Displaying the Data in a Table

So let’s add these two properties as fields in our component, and instead of iterating over rows like we have been doing we will add a method which returns a subset of the data, based on those properties.

In order to display the page numbers we also added a method which calculates the number of pages there will be in total, and we use v-for again to iterate through all the pages.

When specifying a number to v-for instead of an array, Vue.js will create a loop which will count from 1 up to (and including) the number you specified.

Changing pages is as simple as updating the field we added which stores the current page.

We don’t need to worry about re-sorting or re-rendering the page, or even re-splitting the array into a new sub-array.

If the method used to return a subset of the array uses the property currentPage, then just by updating the value, everything will update automatically.

In this article we built a data-table using some basic directives in Vue.js. But it’s worth noting that the only thing making this a table is the HTML template.

Everything we did here would work on a blog, grid layout, or really any other HTML representation all the same.

Moving forward there are many more features you can add to this; the same concepts used to paginate, where we iterate over a subset of the data, can be used to add filtering your table with a search box, or you can asynchronously load your data one page at a time, and by replacing the rows property, achieve a lazily loaded data table.

Next, in the create form we had a form variable that we defined as an object with keys and empty values. In this case, we actually have a variable company that is saved in the Composable file, so we don’t need to even pass it anywhere, we just get it from useCompanies() and use it as a local one. On the very event of mounted, we call getCompany() but we don’t need to assign the result to a variable, it’s all done in the composables/companies.js. Now, you see the beauty of Composition API?

The submit and validation parts work absolutely identical as the create form: redirects to the index in case of success, or show the error in case of the validation error.

Recommended VUE JS Tutorials

That’s it, we’ve built a CRUD with Vue 3 Composition API and Laravel API on the back-end.

The link to the final repository: https://github.com/LaravelDaily/Laravel-Vue-3-Composition-API-CRUD

Of course, it’s a very simple example: with only text fields, with no fancy design styling elements, with just core basics. But that was exactly the point – to give you a head start, from here you can read more about Vue and API, and practice more complex scenarios.

If I forgot/missed something in this article, or if you have any ideas for future articles on this topic, let me know in the comments.

Like our articles?
Check out our Laravel online courses!

If you have “too many redirects” error on /login or /register routes please note, that inserted ‘/{any}’ route in routes/web.php should be the last one in file, require __DIR__.’/auth.php’; should be before it.