This is the my for loop:
<tr v-for="doc in documents">
<th></th>
<th><i class="fas fa-doc.type fa-lg"></i></th>
<td>{{ doc.name }}</td>
</tr>
I have a doc.type which is either folder or file. I want to dynamically change fa icon like concatenate 'fa-' with doc.type. Is it possible?
Use binding and a method to return the formatted class name.
Template:
<i :class="getClassName(doc.type)"></i>
Vue -
using a method:
...
methods: {
getClassName(type){
return 'fas fa-' + type + ' fa-lg';
}
}
Or using a computed property:
...
computed: {
getClassName() {
return type => `fas fa-${doc.type} fa-lg`;
}
}
Alternative would be to do something like this (if using ES6+):
<i :class="`fas fa-${doc.type} fa-lg`"></i>
Try something like this:
<div v-for="doc in documents" :key="doc.id">
<th></th>
<th>
<a href="javascript:void(0)" #click="getChildDocs(doc.id)" :title="doc.type">
<i :class="{'fas': true, 'fa-file': doc.type == 'file', 'fa-dir': doc.type == 'dir', 'fa-lg': true}"></i>
</a>
</th>
<td>{{ doc.name }}</td>
</div>
Read here https://v2.vuejs.org/v2/guide/class-and-style.html
There are many ways to achieve this, here's one:
data() {
return {
iconTypes: {
'folder': 'fa-folder',
'file': 'fa-file'
}
}
},
methods: {
executeCommand(doc) {
if (doc.type === 'file') {
this.$emit('file-event-handler', any_arguments_here);
// or simply this.doSomething(doc)
}
// or use a switch here
}
}
<a href="#" #click.prevent="executeCommand(doc)"
<i class="[ 'fas fa-lg', iconTypes[doc.type] ] "></i>
</a>
Related
<script>
export default {
name: "OutPatient",
data(){
return{
out_patients: {}
}
},
methods: {
index(){
axios.get('/data/out_patient').then(({data}) =>
(this.out_patients = data.data));
},
update(){}
},
created(){
this.index();
}
}
</script>
<tr v-for="out_patient in out_patients" v-bind:key="out_patient.id">
<td>{{out_patient.id}}</td>
<td>{{out_patient.first_name}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<i class="fa fa-edit blue"></i>
|
<i class="fa fa-trash red"></i>
</td>
</tr>
This is my code but the data is not showing in the table even though in the XHR the data shows there.
In the inspect element I can see the data but the v-for loop is unable to display the data.
Seems to me like you tried to extract data twice, you have this:
axios.get('/data/out_patient').then(({data}) =>
(this.out_patients = data.data));
if you already extract it here: {data} then you don't need data.data, only data below?
index() {
this.error = this.out_patients = null;
this.loading = true;
axios
.get('/data/out_patient')
.then(response => {
this.loading = false;
this.out_patients = response.data;
}).catch(error => {
this.loading = false;
this.error = error.response.data.message || error.message;
});
},
this rather works for me.
thank you all for the support
can you try fetching the data on mounted life cycle hook instead of created in order to populate the table with data on page load mounted is the best hook lifecycle as much I know.
<script>
export default {
name: "OutPatient",
data(){
return{
out_patients: {},
out_patient:'',
}
},
methods: {
index(){
axios.get('/data/out_patient')
.then(({data}) =>
(this.out_patients = data.data));
},
update(){
}
},
created(){
this.index();
}
}
</script>
<tr v-for="out_patient in out_patients" v-bind:key="out_patient.id">
<td>{{out_patient.id}}</td>
<td>{{out_patient.first_name}}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<a href="#">
<i class="fa fa-edit blue"></i>
</a>
|
<a href="#">
<i class="fa fa-trash red"></i>
</a>
</td>
</tr>
Just declare out_patient in data. I hope this solves your issue.
And also check if out_patients is returning data.
I have data on table using Model View Controller :
controller :
<tbody>
#php
$no=0;
#endphp
#foreach ($pns as $i)
<tr class="even pointer">
<td class="a-center ">{{ ++$no }}</td>
<td class=" ">{{ $i->users->nama}}</td>
<td class=" ">{{ $i->NIP_lama}}</td>
<td class=" ">{{ $i->NIP_baru}}</td>
<td class=" ">{{ $i->TMT_CPNS}}</td>
<td class=" ">{{ $i->TMT_PNS}}</td>
<td class=" ">{{ $i->TMT_gol_ruang}}</td>
<td class=" ">{{ $i->master_golongan->golongan}}</td>
<td class=" ">{{ $i->master_jabatan->nama_jabatan}}</td>
</tr>
#endforeach
</tbody>
And the Controller :
public function pns() {
$pns = Data_pns::with('users')->get();
return view('admin.pns',['pns' => $pns]);
}
its run normally and not having error . now I want to add datatables yajra yajra feature , and it has 1 problem . I dont know how to add link :
<td class=" ">{{ $i->users->nama}}</td>
on the datatables :
My View :
#push('scripts')
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: '{!! route('d_pns') !!}',
columns: [
{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
{ data: 'users.nama', name: 'users.nama'},
{ data: 'NIP_lama', name: 'NIP_lama'},
{ data: 'NIP_baru', name: 'NIP_baru'},
{ data: 'TMT_CPNS', name: 'TMT_CPNS'},
{ data: 'TMT_PNS', name: 'TMT_PNS'},
{ data: 'TMT_gol_ruang', name: 'TMT_gol_ruang'},
{ data: 'master_golongan.golongan', name: 'master_golongan.golongan'},
{ data: 'master_jabatan.nama_jabatan', name: 'master_jabatan.nama_jabatan'},
],
});
})
</script>
#endpush
and my controller like this :
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->make(true);
}
edited this controller
and my controller like this :
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->make(true);
}
but this output in view " <#a href="project/pns/5">test" with out #
my Question how to add link like
<td class=" ">{{ $i->users->nama}}</td>
on datatbles ?
you already halfway there, you need to set the 'Nama' columns as raw, if you're returning an html content like this
public function indexDataTables_pns()
{
$pns = Data_pns::with('users','master_golongan','master_jabatan')->get();
return Datatables::of($pns)->addIndexColumn()
->addColumn('Nama', function ($pns) {
return ''.$pns->users->nama.'';
})
->rawColumns(['Nama'])
->make(true);
}
I following this tutorial : How to route in Laravel DataTables
its so simple , but i cant do it . after i set my controller and my route and view , its not showing data and and table. in the table i have a button like'action' how i can take this comand to this button ?
can you check my faulth query
Route::get('user/show1', 'userController#show')->name('usershow1');
Route::get('user/show1-dt', 'userController#indexDataTables')->name('usershow1dt');
controller
public function show()
{
$pemeliharaan = Pemeliharaan::with(['user','alat'])->where('status','harian')->get();
return view('users.view_harian',['pemeliharaan' => $pemeliharaan]);
}
public function indexDataTables()
{
$pemeliharaan = Pemeliharaan::query();
// return DataTables::eloquent($pemeliharaan)->toJson();
return Datatables::of($pemeliharaan)->make(true);
}
and i have a view like this . the page number,search and pagination is showing at view ,but this data not showing. can you correctted this view ?
<div class="box-body table-responsive no-padding">
<table class="table table-hover" id="table">
<tbody><tr>
<th>No</th>
<th>Nama Alat</th>
<th>status</th>
<th>User Input</th>
<th>Action</th>
<th>Tanggal</th>
</tr>
{{-- #php ---> before i suing datatables my view like that
$no=0;
#endphp
#foreach ($pemeliharaan as $i)
<tr>
<td>{{ ++$no }} </td>
<td>{{ $i->alat->nama_alat}}</td>
<td>{{ $i->status}}</td>
<td>{{ $i->user->name}}</td>
<td> Lihat Data</span> </td>
<td>{{ $i->created_at}}</td>
</tr>
#endforeach --}}
</tbody></table>
</div>
.
.
#endsection
#push('scripts')
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('usershow1dt') !!}',
columns: [
{ data: 'nama_alat', name: 'nama_alat'},
{ data: 'status', name: 'status'},
{ data: 'User Input', name: 'nama'},
{ data: 'Action', name: 'name'},//here my button
{ data: 'Tanggal', name: 'created_at'},
],
});
})
</script>
#endpush
Try This:
public function show() {
$pemeliharaan = Pemeliharaan::where('user','alat')->where('status','harian')->get();
return view('users.view_harian',['pemeliharaan' => $pemeliharaan]);
}
I'm using Laravel 5.6 and Vuejs 2.
If I click on my checkbox and make the value true it's supposed to save a 1 in the database and if I click my checkbox and make the value false it saves a 0.
The problem I'm having is that if I click my checkbox and make it true, it doesn't save the correct value, no changes is made to the database and I don't get any errors. If I click on my checkbox and make it false, it saves the 0 correctly.
I did notice that even when my value is supposed to be true, I do get a false when I dd($category->has('active')
I'm not sure where I'm going wrong or how to fix it.
My vue file
<template>
<div class="card-body">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Active</th>
<th scope="col">Title</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="(category, index) in categoriesNew" >
<td>
<label>checkbox 1</label>
<input name="active" type="checkbox" v-model="category.active" #click="checkboxToggle(category.id)">
</td>
<td>
{{ category.title }}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: ['categories'],
data(){
return {
categoriesNew: this.categories
}
},
methods: {
checkboxToggle(id){
console.log(id);
axios.put('/admin/category/active/'+id, {
categories: this.categoriesNew
}).then((response) => {
//Create success flash message
})
},
},
mounted() {
console.log('Component mounted.')
}
}
</script>
my routes
Route::put('admin/products/updateAll', 'Admin\ProductsController#updateAll')->name('admin.products.updateAll');
Route::put('admin/category/active/{id}', 'Admin\CategoryController#makeActive')->name('admin.category.active');
Route::resource('admin/category', 'Admin\CategoryController');
Route::resource('admin/products', 'Admin\ProductsController');
my CategoryController#makeActive
public function makeActive(Request $request, $id)
{
$category = Category::findOrFail($id);
if($request->has('active'))
{
$category->active = 1;
}else{
$category->active = 0;
}
$category->save();
}
I hope I made sense. If there is anything that isn't clear or if you need me to provide more info, please let me know
Try changing this line
categories: this.categoriesNew
to
categories: category.active
and add a data prop at the top called category.active: ''
I've managed to get it to work. This is what I did.
vue file
<template>
<div class="card-body">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Active</th>
<th scope="col">Title</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr v-for="(category, index) in categories" >
<td>
<label>checkbox 1</label>
<input type="checkbox" v-model="category.active" #click="checkboxToggle(category)">
</td>
<td>
{{ category.title }}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: ['attributes'],
data(){
return {
categories: this.attributes,
}
},
methods: {
checkboxToggle (category) {
axios.put(`/admin/category/${category.id}/active`, {
active: !category.active
}).then((response) => {
console.log(response)
})
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
my routes
Route::put('admin/category/{category}/active', 'Admin\CategoryController#makeActive')->name('admin.category.active');
and my CategoryController#makeActive
public function makeActive(Request $request, $id)
{
$category = Category::findOrFail($id);
if(request('active') === true)
{
$category->active = 1;
}else{
$category->active = 0;
}
$category->save();
}
I need help in rendering my array I want to make a condition inside my map function. But somehow my transpiler is not the accepting and having parsing error
Here is my code:
import { getGroups } from '../../actions/groupActions'
import { refreshToken } from '../../actions/authActions'
import { connect } from 'react-redux'
import _ from 'lodash'
import { Link } from "react-router"
class Group extends React.Component {
constructor(props) {
super(props);
this.state = {
groups: []
};
}
componentWillMount(){
this.props.getGroups().then(() => {
console.log('this groups props: ', this.props)
if(this.props.errors.code === 'UNAUTHORIZED'){
this.props.refreshToken().then(() => {
this.props.getGroups()
})
}
})
}
render(){
const groupArr = _.valuesIn(this.props.groups)
return (
<div>
<h1>Groups</h1>
<table className="table table-responsive table-bordered table-condensed">
<thead>
<tr>
<td>Name</td>
<td>Queue</td>
<td>Created At</td>
<td>Execution Type</td>
<td>Members</td>
<td>Action</td>
</tr>
</thead>
<tbody>
{this.props.groups ? (groupArr.map((groups, i) => {
return (
<tr key={i}>
<td>{groups.name}</td>
<td>{groups.queue}</td>
<td>{groups.createdAt}</td>
<td>{groups.executionType}</td>
<td>
{groups.members ? (groups.members.map((members, index) => {
{members.type === 'command' ? (
return (<div className="alert alert-success" role="alert" key={index}>{members._id}</div>)
) : (
return (<div className="alert alert-danger" role="alert" key={index}>{members._id}</div>)
) }
})) : (return ('No members found'))}
</td>
<td>
<Link className="btn btn-sm btn-warning" >
<i className="fa fa-pencil"></i>
</Link>
<button className="btn btn-sm btn-danger">
<i className="fa fa-trash-o"></i>
</button>
<button className="btn btn-sm btn-success">
<i className="fa fa-play-circle"></i>
</button>
</td>
</tr>
)
})) : (<tr>No records found</tr>)}
</tbody>
</table>
</div>
);
}
}
Group.propTypes = {
getGroups: React.PropTypes.func.isRequired,
errors: React.PropTypes.object.isRequired,
refreshToken: React.PropTypes.func
}
Group.contextTypes = {
router: React.PropTypes.object.isRequired
}
function mapStateToProps(state) {
return{
groups: state.groupReducer.groups,
links: state.groupReducer.links,
errors: state.groupReducer.errors
}
}
export default connect(mapStateToProps, { getGroups, refreshToken })(Group)
Here is the error:
SyntaxError: C:/Users/Frank/Projects/crun_fe/src/js/react/components/group/Group.js: Unexpected token (55:26)
53 | {groups.members ? (groups.members.map((members, index) => {
54 | {members.type === 'command' ? (
> 55 | return ({members._id})
| ^
56 | ) : (
57 | return ({members._id})
58 | ) }
You are using the ternary operator in a wrong way, Syntax is:
condition ? expression : expression
Both values should be expression but you are using return statement, that's why it is throwing the error.
If you want to return the result then use it in this way:
return a ? a+1 : 0;
Didn't run this code, just made some changes to solve your original problem, please check the proper closing of braces and tags, Try this:
{
this.props.groups ? groupArr.map((groups, i) => {
return (
<tr key={i}>
.....
<td>
{
groups.members ?
groups.members.map((members, index) => {
return members.type === 'command' ?
<div className="alert alert-success" role="alert" key={index}>{members._id}</div>
:
<div className="alert alert-danger" role="alert" key={index}>{members._id}</div>
})
: <div>'No members found'</div>
}
</td>
.....
</tr>
)
}) : <tr> No records found </tr>
}