I need to use slot #item for custom UI
<v-data-table
v-model="selected"
:headers="header"
:items="result"
show-select // <---- here
>
<template v-slot:item="{ item }"> // <---- here
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</template>
</v-data-table>
But after use item slot, I can't not use row select(v-data-table component's props show-select).
The row in the table, checkbox is not work anymore.
Does v-data-table is some limitation that row select can't work when use slot #item?
https://codesandbox.io/s/vuetify-2-forked-5l0yu0?file=/src/App.vue
Related
I'm having a trouble on how can I implement conditional rendering inside v-for in laravel vue js
based on the documentation of vue js v-for and v-if together is not recommended. It would be great if anybody could help me out, thank you so much in advance!.
This is what flow looks like I know the format is incorrect
<tr v-for="user in users" :key="user.id" :value="user.id">
<td>
<v-if =user.gender="Male" >
<span>Male - {{ user.gender }}</span>
<v-else>
<span>FeMale - {{ user.gender }}</span>
</td>
</tr>
script
<script>
export default {
data() {
return {
users: [],
}
},
created() {
this.getUsers();
},
mounted() {
},
methods: {
getUsers() {
axios.get(BASE_URL + "/users/listUsers").then(response => {
this.users = response.data;
});
},
},
}
</script>
Your v-if syntax is completely incorrect. Let's fix it first.
<tr v-for="user in users" :key="user.id" :value="user.id">
<td>
<span v-if="user.gender=='Male'">Male - {{ user.gender }}</span>
<span v-else>FeMale - {{ user.gender }}</span>
</td>
</tr>
If <span> isn't necessary I would use this:
<tr v-for="user in users" :key="user.id" :value="user.id">
<td v-if="user.gender=='Male'">Male - {{ user.gender }}</td>
<td v-else>FeMale - {{ user.gender }</td>
</tr>
Actually, there is a better way:
<tr v-for="user in users" :key="user.id" :value="user.id">
<td>{{ user.gender=="Male" ? "Male" : "FeMale" }} - {{ user.gender }}</td>
</tr>
v-for and v-if can't be used in the same tag. This is not the case in your code. When you need v-for and v-if together, you should use a computed property, and return the array/object that is filtered based on the condition, then inject it into v-for.
Let's say you need something like this:
<tr v-for="user in users" :key="user.id" v-if="user.id > 10">...</tr>
In this case, we use computed property:
computed: {
filteredUsers() {
return this.users.filter(user => user.id > 10);
}
}
and in the template:
<tr v-for="user in filteredUsers" :key="user.id">...</tr>
I think there is a misunderstanding. You should not use v-if and v-for on the same element the way you used it is fine. You can see an example here.
If you don't want to have v-if at all since you aren't rendering completely different elements you could use ternary operation in mustaches:
<tr v-for="user in users" :key="user.id" :value="user.id">
<td>
<span>{{ user.gender === 'Male' ? `Male - ${user.gender}` : `Female - ${user.gender}` }}</span>
</td>
</tr>
data table changed significantly in vuetify 2.0, please find below the working code for vuetify 1.5:
<v-data-table
:headers="headers"
:items="items"
class="elevation-1"
:rows-per-page-items="[10, 25, 50]"
>
<template v-slot:items="props">
<tr #click="selectRow(props.item)" :class="{'primary': props.item.vid===selectedItemId}">
<td>
<a v-bind:href="props.item.webpage_url" target="_blank">{{ props.item.title }}</a>
</td>
<td>{{ props.item.upload_date }}</td>
<td>{{ props.item.uploader }}</td>
<td>{{ props.item.view_count }}</td>
<td>{{ props.item.like_count }}</td>
<td>{{ props.item.dislike_count }}</td>
<td>{{ props.item.score }}</td>
<td>{{ props.item.duration }}</td>
<td><router-link :to="{ path: '/vidcc', name:'vidcc', params: { vid: props.item.vid }}" target="_blank">cc</router-link></td>
</tr>
</template>
</v-data-table>
I managed to replace the first column with a custom v-slot. Any examples regarding the on-lick and selected formatting highly appreciated. My Vuetify 2.0 try outs:
<v-data-table
dense
:headers="headers"
:items="items"
class="elevation-1"
:footer-props="{
'items-per-page-options': [10, 25, 50],
}"
>
<template v-slot:[`item.title`]="{ item }">
<a target="_blank" :href="item.webpage_url">
{{ item.title }}
</a>
</template>
<template v-slot:no-data>
<router-link :to="{ path: '/vidcc', name:'vidcc', params: { vid: item.vid }}" target="_blank">cc</router-link>
</template>
</v-data-table>
</div>
</div>
</template>
For now I ended up rendering every td manually:
<v-data-table
dense
:headers="headers"
:items="items"
class="elevation-1"
:footer-props="{
'items-per-page-options': [10, 25, 50],
}"
#click:row="selectRow"
>
<template v-slot:body="{ items }">
<tbody>
<tr #click="selectRow(item)" :class="{'primary': item.vid===selectedItemId}" v-for="(item) in items" :key="item.vid">
<td class="text-start"><a target="_blank" :href="item.webpage_url" :ref="'element' + item.vid" >{{ item.title }}</a></td>
<td>{{ item.upload_date }}</td>
<td>{{ item.uploader }}</td>
<td>{{ item.view_count }}</td>
<td>{{ item.like_count }}</td>
<td>{{ item.dislike_count }}</td>
<td>{{ item.score }}</td>
<td>{{ item.duration }}</td>
<td><router-link :to="{ path: '/vidcc', name:'vidcc', params: { vid: item.vid }}" target="_blank">cc</router-link></td>
</tr></tbody>
</template>
</v-data-table>
However when I click the button only the first button contains the user id the rest returns null. Also depending on where I place my id tag on HTML the data-id is empty. How can I pass data from my blade view to Vue.js for an Axios post request which contains the post Id ?
const app = new Vue({
el: '#like',
data: {
post_id: '',
},
methods: {
whichId: function(event) {
this.post_id = this.$el.getAttribute('data-id');
console.log(this.$el.getAttribute('data-id'));
}
}
})
<div class="container" id="like">
<table class="table mt-5">
<tbody>
#foreach ($posts as $post)
<tr>
<td><img src="images/profil.svg" class="rounded-circle border border-dark ml-2" width="60" height="60" alt=""></td>
<td>{{ $post->username->name }}</td>
<td>{{ $post->content }}</td>
<td>
<button v-on:click="whichId" data-id="{{ $post->id }}">
<img src="/images/heart.svg" width="30" height="30" />
</button>
</td>
<td>{{ $post->created_at->diffForHumans() }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
The this.$el is going to refer to the element. When using PHP to iterate through records. You should pass the id through the click event handler. Thanks to Wilk Randall on laracast for the help.
methods: {
whichId (postId) {
console.log(postId);
}
}
<td><button v-on:click="whichId({{ $post->id }})"<img src="/images/heart.svg" width="30"></button></td>
I'm developing an application with Symfony 3 in which I'm using datatables.
to avoid getting all rows of database, I'm using doctrine's paginator. so i want the datatable will get 100 elements first, then when I click in next button it will charge the next 100 elements.
My problem is that when setting datatable with first 100 elements, I can't click on next button. ( because it's showing the 100 elements so there are no other elements for it). I want to tell it that I have more than 100 elements. so how can I do it.
My table :
<table class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"
id="table_city">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Region</th>
<th>Country</th>
<th class="no-sort">Actions</th>
</tr>
</thead>
<tbody>
{% for core_city in core_cities %}
<tr>
<td>{{ core_city.code }}</td>
<td>{{ core_city }}</td>
<td>{{ core_city.CoreRegion }}</td>
<td>{{ core_city.CoreRegion.coreCountry }}</td>
<td class="datatable_td_buttons">
<a class="m-portlet__nav-link btn m-btn m-btn--icon m-btn--icon-only m-btn--pill"
title="Show" href="{{ path('core_city_show', { 'id': core_city.id }) }}">
<i class="la la-search"></i>
</a>
<a href="{{ path('core_city_edit', { 'id': core_city.id }) }}"
class="m-portlet__nav-link btn m-btn--icon m-btn--icon-only m-btn--pill" title="Edit">
<i class="la la-edit"></i>
</a>
<a href="{{ path('core_zip_code_import_by_city', { 'id': core_city.id } ) }}"
class="m-portlet__nav-link btn m-btn--icon m-btn--icon-only m-btn--pill"
title="Import Zip Code">
<i class="la la-upload"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
I found solution :
$('#example').dataTable( {
"infoCallback": function( settings, start, end, max, total, pre ) {
return start +" to "+ end;
}
} );
I want to create a radio button field that will be selecting present, late, absent, others for each row of student.
The problem is... When i click the radio button for another student row... the radio button will pass down on the currently selected row and the one i selected previously will be gone.
Please Help.
Here's my view
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Present</th>
<th>Late</th>
<th>Absent</th>
<th>Others</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
#foreach ($users as $users)
<tr>
<td>{{ $users->student_id }} </td>
<td>{{ $users->student_firstname }} {{ $users->student_lastname }}</td>
<td>{{ Form::radio('result', 'present', true)}}</td>
<td> {{ Form::radio('result', 'late' ) }}</td>
<td>{{ Form::radio('result', 'absent') }}</td>
<td>{{ Form::radio('result', 'others') }}</td>
<td> <input id="comment" name="comment" type="text" class="form-control"></td>
#endforeach
</tr>
If all input fields have the exact same name of results its treated as one big input group with only one correct answer.
By appending the student id 'result['.$student->id.']' you are separating each row of input buttons into their own groups, allowing multiple radio button subgroups within a single <form>.
Which you can then catch the array of answers for each subgroup with Input::get('results') or $request->get('results') if your using Laravel's Form Request Validation.