Skip to main content

Posts

Showing posts from August, 2019

Add a dynamic mouse over for each row in a data-table

Try in Editor: https://codepen.io/jemirisselvi/pen/YzKQxmw?editors=1010 Vue:   <div id="app">     <v-app id="inspire">       <div>         <v-data-table           :headers="headers"           :items="items"           :search="search"           :loading="isLoading"           hide-default-footer           item-key="name"           class="elevation-1"         >           <template v-slot:body="{ items }">             <tbody>               <tr v-for="(item,index) in items" :key="item.name">                 <td>                   <p @mouseover="item.show = true" @mouseleave="item.show = false">                   {{ item.name }}                   <v-icon v-show="item.show">delete</v-icon>                   </p>                 </td>                 &

Load the dynamic datatable in vuejs

Try in Editor: https://codepen.io/jemirisselvi/pen/yLBXoxK?editors=1010 Vue: <div id="app">   <v-app id="inspire">     <div>         <v-data-table           :headers="headers"           :items="items"           :loading="isLoading"           class="elevation-1"         >         <template slot="items" slot-scope"myprops">           <td v-for="header in headers">             {{ myprops.item[header.value] }}           </td>          </template>       </v-data-table>     </div>   </v-app> </div>