vue: Refactor to make use of Vue recordsdata


Teacher: [0:00] Let’s have a look at learn how to convert our TicketDetails.js to a TicketDetails.vue document. Remember the fact that that is made up of a template, made up of a script, and it is made up of a method.

[0:28] The template, we will replica and paste from there. For our script, we are going to export default, and the very first thing we do is we’ve a reputation. On this case, we had TicketDetails.

[0:50] Then we’ve our props, we will simply carry the ones up from our definition sooner than after which we will parse again our knowledge and our strategies like we had right here. It is the similar more or less configuration object that we have got for the whole lot else in Vue. Relating to styling, there may be not anything particular we did. We will go away that clean or exclude it altogether.

[1:18] For our App.vue, we are going to change the template with the whole lot in between our frame tags over right here. As an alternative of uploading the, Hi Global, we need to import TicketDetails from TicketDetails.vue. Then we need to parse that part into our application.

[1:58] We additionally need them to arrange our knowledge right here, as an alternative of our major JS. Now, we will pass into our price tag apps and we will run, npm run serve. Get started construction server, we’re going to construct our recordsdata, and spot we have forgotten to parse the important thing on our vue-details. Line seven. We get a URL to click on on, which brings us to this model of our application which fits as sooner than.