Vue.js 2 Web Development Projects

Dynamic routes with parameters

The last component we will add in the application is Ticket, which display a detailed view of one ticket by its ID. It will show the title and description inputted by the user, plus the date and the status.

1. Create a new Ticket.vue file and add this template with the usual loading animation and not found notice:

      <template>        <div class="ticket">          <h2>Ticket</h2>              <Loading v-if="remoteDataBusy"/>              <div class="empty" v-else-if="!ticket">            Ticket not found.          </div>              <template v-else>            <!-- General info -->            <section class="infos">              <div class="info">                Created on <strong>{{ ticket.date | date }}</strong>              </div>              <div class="info">                Author <strong>{{ ticket.user.username }}</strong>              </div>              <div class="info"> Status <span ...