I am using Struts 1.x in my application. Recently i used Vue js.So, I use the same jsp page for Adding and updating (in this case company). So When i click edit, the details are fetched the page is redirected to that page and form values are set from the action class.
Here is the html portion
<form action="company.do" method="post" name="companyForm">
<html:hidden property="method" value="doAddUpdateCompany" />
<html:hidden property="companyId" value="${companyForm.companyId}" />
<div class="row" >
<div class="col-md-9">
<div class="grid simple">
<div class="grid-title ">
<h4>
<logic:equal value="addCompany" property="method" name="companyForm">
New <span class="semi-bold">Company</span>
</logic:equal>
<logic:equal value="updateCompany" property="method" name="companyForm">
Edit <span class="semi-bold">Company</span>
</logic:equal>
</h4>
<div class="tools"> </div>
</div>
<div class="grid-body">
<table class="tbl_wall" style="width: 100%" >
<tr >
<td class="fi_wall" >Company Name<span class="notify style16"> *</span></td>
<td class="fi_wall" ><html:text property="companyName" name="companyForm" styleClass="med_txt" /></td>
<td> </td>
</tr>
<tr>
<td class="fi_wall" valign="top" >Company Code<span class="notify style16"> *</span> (3 Letter)</td>
<td class="fi_wall" valign="middle" ><html:text property="companyCode" maxlength="3" styleClass="med_txt" name="companyForm" /></td>
<td> </td>
</tr>
<tr id="cmp">
<td class="fi_wall">Company Type </td>
<td class="fi_wall"><select name="companyType" v-model="companyType">
<option value="-1">select</option>
<option v-for=" result in results " v-bind:value="result.commonId">
{{ result.name}}</option>
</select></td>
</tr>
<tr>
<td colspan="3" align="center">
<button type="button" class="btn btn-success" onclick="doSave()" ><i class="fa fa-save"></i> Save</button>
</td>
</tr>
</table> </form>
and the vue Portion
<script type="text/javascript">
new Vue({
el: '#cmp',
data: {
results: [],
companyType : '-1'
},
mounted() {
axios.get('/easyoffice/companyType.do?method=getCompanyTypeAjax').then(response => {
this.results = response.data,
this.companyType = document.forms['companyForm'].companyType.value
})
.catch(e => {
this.errors.push(e)
})
}
});</script>
i used this.companyType = document.forms['companyForm'].companyType.value to set form value but it is not working. Any Thoughts?
Related
I have a get api that looks like this -
this.$API +"api/v1/puzzles/getAll?page=" + this.pageNo +"&limit=" + this.pageLimit,
It accepts two params page and limit. How to make pagination for this get api ?
My html code:
<md-card>
<md-card-header data-background-color="green">
<h4 class="title">List of Puzzles</h4>
<p class="category">The list of puzzles you have uploaded</p>
</md-card-header>
<md-card-content class="justify-content-center">
<table>
<thead>
<tr>
<th><b>Puzzle Question</b></th>
<th><b>Option 1</b></th>
<th><b>Option 2</b></th>
<th><b>Option 3</b></th>
<th><b>Option 4</b></th>
<th><b>Correct Answer</b></th>
<th><b>Action</b></th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in puzzleList.puzzles" :key="index">
<td class="q-img"><img :src="data.qImage" alt="" /></td>
<td
class="ans-img"
v-for="(collection, index) in data.qOptions"
:key="index"
>
<img :src="collection.oImage" alt="" />
</td>
<td style="padding-left: 32px">
<h2>{{ data.qAnswer }}</h2>
</td>
<router-link to="/editPuzzle"
><td style="padding-top: 70px">
<button class="btn btn-success">Edit</button>
</td></router-link
>
<td>
<button
v-on:click="deletePuzzle(data.id)"
class="btn btn-danger"
>
Delete
</button>
</td>
</tr>
</tbody>
<!-- <pagination v-model="pageNo" :pageLimit="500" #paginate="myCallback"/> -->
</table>
</md-card-content>
</md-card>
data() {
return {
siteURL: this.$axios.defaults.siteURL,
puzzleList: [],
pageNo: 1,
pageLimit: 4,
token: localStorage.getItem("_token"),
puzzleId: "",
};
},
I tried to use third-party packages but couldnt make it work. I have taken 2 variables inside return above like pageNo: 1 and pageLimit: 4 and haven't found any solution anywhere with this type of api. Please show me detaily, how should I implement this ?
Update:
<table>
<thead>
<tr>
<th><b>Puzzle Question</b></th>
<th><b>Option 1</b></th>
<th><b>Option 2</b></th>
<th><b>Option 3</b></th>
<th><b>Option 4</b></th>
<th><b>Correct Answer</b></th>
<th><b>Action</b></th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in puzzleList.puzzles" :key="index">
<td class="q-img"><img :src="data.qImage" alt="" /></td>
<td
class="ans-img"
v-for="(collection, index) in data.qOptions"
:key="index"
>
<img :src="collection.oImage" alt="" />
</td>
<td style="padding-left: 32px">
<h2>{{ data.qAnswer }}</h2>
</td>
<router-link to="/editPuzzle"
><td style="padding-top: 70px">
<button class="btn btn-success">Edit</button>
</td></router-link
>
<td>
<button
v-on:click="deletePuzzle(data.id)"
class="btn btn-danger"
>
Delete
</button>
</td>
</tr>
<pagination
v-model="pageNo"
:pageLimit="4"
#paginate="myCallback"
/>
</tbody>
</table>
methods:{
myCallback(e) {
this.pageNo = e;
this.getPuzzle();
},
getPuzzle: function () {
this.$axios
.get(
this.$API +
"api/v1/puzzles/getAll?page=" +
this.pageNo +
"&limit=" +
this.pageLimit,
{
headers: {
Authorization: "Bearer " + this.token,
},
}
)
.then((res) => {
this.puzzleList = res.data.data;
this.puzzleId = res.data.data.puzzles[0].id;
console.log(this.puzzleId);
});
},
any third-party of pagination api has the property that you should set the current page and the limit or total, the main of pagination is that current page,page size, total and the callback of current page changes, the lifecycle is that:
init: you fetch the api with the params(currentpage, pagesize) to get data, then according to your response ,you can get the total count of your data
use the 1 step response like total count, and give it to your pagination component
don't forget to declare your onChange callback ,which the pagination component necessary to use, in the callback ,you just change the current page which user click and fetch your api again to get the new data.
In different posts around the internet (for example this one) I found that Vue 2 code should work with Vue 3 but for me it does not. For example I have simple component
<template>
<div class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
<table class="table">
<thead>
<tr class="text-left">
<th>
<label>
<input type="checkbox">
</label>
</th>
<th>User ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="1">
</label>
</td>
<td> <span>{{ id }}</span> </td>
<td> <span>Cort</span> </td>
<td> <span>Tosh</span> </td>
<td> <span>{{ email }}</span> </td>
<td> <span>Male</span> </td>
<td> <span>327-626-5542</span> </td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
id: 1,
email: 'test#mail.com'
}
},
mounted() {
alert('mounted');
},
created() {
alert('created');
}
};
</script>
The table is generated just fine, but both mounted and created not fired when component made. Also the email and id not shown. Only the table is shown.
Your code works:
Vue.createApp({
data() {
return {
id: 1,
email: 'test#mail.com'
}
},
created() {
alert('created')
},
mounted() {
alert('mounted')
}
}).mount('#app')
<script src="https://unpkg.com/vue#next"></script>
<div id="app" class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
<table class="table">
<thead>
<tr class="text-left">
<th>
<label>
<input type="checkbox">
</label>
</th>
<th>User ID</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Gender</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="1">
</label>
</td>
<td> <span>{{ id }}</span> </td>
<td> <span>Cort</span> </td>
<td> <span>Tosh</span> </td>
<td> <span>{{ email }}</span> </td>
<td> <span>Male</span> </td>
<td> <span>327-626-5542</span> </td>
</tr>
</tbody>
</table>
</div>
I'm trying to calculate the quantity of items in my vue. The problem I'm having is that my computed property isn't picking up my object, because my thinking was as you can see with the commented out section is that I was going to loop through it and calculate the quantity, but since I'm not able to grab productItems I'm not able to loop through it.
Here is my code
<template>
<div class="content-header">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr v-for="item in products">
<td>
{{ item['name'] }}
</td>
<td>
<input style="width: 100px; margin-left: 0; display: inline"
type="number" class="form-control"
v-model="productItems[item['name']]['unit']"
>
</td>
</tr>
<tr>
<td></td>
<td>
Consumption total: {{ consumptionTotal }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: [],
data(){
return {
productItems: {}
},
computed:{
consumptionTotal(){
console.log(this.productItems);
// return Object.keys(this.productItems).reduce((carry, item) => {
// carry += Number(this.productItems[item]['unit'])
// return carry;
// }, Number(0));
},
},
watch: {
},
methods: {
},
mounted() {
}
}
</script>
Try below steps. Hopefully it will helps you.
Step 1: productItems should be an array
Step 2: Calculate functions be like
computed: {
consumptionTotal () {
return this.productItems.reduce((total, item) => {
total += item.unit
return total
}, Number(0))
}
}
Step 3: HTML template will be like
<div class="content-header">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-12">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr v-for="item in productItems" :key="item.id">
<td>{{item.id}}</td>
<td>
{{item.name}}
</td>
<td>
<input style="width: 100px; margin-left: 0; display: inline" type="number" class="form-control" :value="item.unit">
</td>
</tr>
<tr>
<td></td>
<td>
Consumption total: {{ consumptionTotal }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
DEMO
I don't know how to add dynamic content in my Vue js 2 app. I'd like to add many div elements after clicking on a button. THis div should have input and after clicking on a Save button all input texts inside dynamically created divs should be sent to backend (so I use model inside my template).
<div v-if="!this.spinnerVisibleForCorrectiveActions">
<div>
<table class="p-2 table-cell">
<tr class="font-weight-bold">
<td class="vue-good-table-col-200">
<div class="mt-2 criterion">
ID
</div>
</td>
<td class="vue-good-table-col-200">
<div class="mt-2 criterion">
DZIAŁANIE
</div>
</td>
<td class="vue-good-table-col-200">
<div class="mt-2">
SZCZEGÓŁY
</div>
</td>
</tr>
<tr v-for="(actions,index) in correctiveActions" :key="index">
<td class="vue-good-table-col-200">
<span> {{actions.orderNumber}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.action}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.recommendations}}</span>
</td>
</tr>
</table>
<button class="addAction p-3 mb-2 bg-secondary text-white w-100 bg-info btn btn-success">NAdd new action</button>
<br>
</div>
How to add dynamically (multiple times) something like this and additionally to have the possibility to get all data from my dynamically created inputs after clicking on a button:
<tr v-for="(actions,index) in correctiveActions" :key="index">
<td class="vue-good-table-col-200">
<span> {{actions.orderNumber}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.action}}</span>
</td>
<td class="vue-good-table-col-200">
<span> {{actions.recommendations}}</span>
</td>
</tr>
Ok, the answer in my case is very simple - I have to only add an empty object to my correctiveActions array:
<button class="addAction p-2 mb-2 bg-secondary text-white w-100 bg-info btn btn-success" #click="addNewAction">Nowe
działanie
</button>
and next:
methods:{
addNewAction() {
this.correctiveActions.push
({
id: undefined,
incidentId: this.incidentId,
orderNumber: this.getNextOrderNumber(),
action: undefined,
recommendations: undefined
});
},
}
I want to do multiple edit, I want to edit from the data I checked following script .blade, I found the TokenMismatchException error in VerifyCsrfToken.php line 68: when updating.
<form name="form" action="{{url('/update-kb')}}" method="post" onsubmit="return deleteConfirm();"/>
<div class="table table-responsive">
<table id="example1" class="table table-bordered">
<thead>
<tr class="info">
<th width="3%"><input type="checkbox" name="select_all" id="select_all" value=""/></th>
<th>No</th>
<th>Data lengkap</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php $i = 1; ?>
#foreach( $datasiswa as $row )
<tr>
<td>
<label class="checkbox-inline"><input type="checkbox" name="checked_id[]" class="checkbox" value="{{$row->id}}"/>
</label>
</td>
<td width="5%">{{ $i }}</td>
<td width="95%">
<table class="table">
<tr>
<td class="info">Nama panggilan</td>
<td>{{$row->nm_panggilan}}</td>
<td class="warning">Pekerjaan ibu</td>
<td>{{$row->pekerjaan_ibu}}</td>
</tr>
<tr>
<td class="info">Jenis kelamin</td>
<td>{{$row->jenis_kelamin}}</td>
<td class="warning">No. Handphone</td>
<td>{{$row->hp_ibu}}</td>
</tr>
<tr>
<td class="info">Tempat, Tanggal lahir</td>
<td>{{$row->tempat}}, {{$row->tanggal_lahir}}</td>
<td class="warning">Alamat</td>
<td>{{$row->alamat}}</td>
</tr>
<tr>
<td class="info">Status anak</td>
<td>{{$row->status_anak}}</td>
<td class="warning">Golongan darah</td>
<td>{{$row->goldar}}</td>
</tr>
<tr>
<td class="info">Agama</td>
<td>{{$row->agama}}</td>
<td class="warning">Nama wali</td>
<td>{{$row->nm_wali}}</td>
</tr>
<tr>
<td class="info">Kewarganegaraan</td>
<td>{{$row->kewarganegaraan}}</td>
</tr>
<tr>
<td class="info">Anak ke-</td>
<td>{{$row->anak_ke}}</td>
</tr>
<tr>
<td class="info">Kelas</td>
<td>{{$row->kelas}}</td>
</tr>
</table>
</td>
<td>
<a href="{!! url('/'.$row->id.'/edit-siswa') !!}">
<button class="btn btn-default btn-block"><i class="fa fa-edit"></i></button><br>
</a>
<a href="{!! url('/'.$row->id.'/delete-siswa') !!}">
<button class="btn btn-danger btn-block"><i class="fa fa-trash"></i></button>
</a>
</td>
</td>
</tr>
<?php $i++; ?>
#endforeach
</tbody>
</table>
<div class="col-md-3">
<input type="submit" class="btn btn-danger" name="delete_submit" value="Hapus"/>
</div>
</div>
</form>
But I still have error, what causes it?
public function updatekb($id, Request $request)
{
$data = Datasiswa::find($id);
if (isset($request->delete_submit)) {
$idArr = $request->checked_id;
foreach ($idArr as $id) {
DB::update('update tb_siswa, tb_pernyataan set tb_pernyataan.kelas = "cekcek" where tb_pernyataan.kelas = "TK A" and tb_siswa.sekolah = "KB TK KHALIFAH 25" and id = "' . $id . '" ');
}
return back();
Session::flash('sukses', 'Data berhasil di update', compact('data'));
}
}
Add below to your form element.
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
Some answers are suggesting to disable csrf protection which is possible but NOT RECOMENDED. This leaves your application vulnureable.
Laravel use CSRF token to verify user request. so you have to use it on yevery request if you want to disable it then you can disable it from See here how to disable it or you can use it as
{{ csrf_field() }}
or
<input type="hidden" name="_token" value="{{ csrf_token() }}"/>
You can resolve this issue in two ways:-
First One:-
{{ csrf_field() }}
or
<input type="hidden" name="_token" value="{{ csrf_token() }}"/> // add this in form
Or the other (simpler) way, inside your app\Http\Middleware/VerifyCsrfToken.php add
protected $except = [
'update-kb', // your route name
];
Hope it helps!