Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Bagaimana cara mengkodisikan agar 1 tombol edit di dalam 2 tabs vue js
<template>
<v-card elevation="3">
<v-form>
<v-card class="d-flex pa-2" color="headcolor headlabelcolor--text">
<div class="my-auto mr-auto">
<h4 v-if="!editMode" class="my-auto">Informasi Pengguna</h4>
<h4 v-if="editMode" class="my-auto">Edit Pengguna</h4>
</div>
<div v-if="editMode" class="my-auto mx-auto">
<standard-button
:disabled="!editMode"
color="deep-orange lighten-1"
icon="$cancel"
tooltip="Cancel"
@click="getData"
></standard-button>
<standard-button
:disabled="!editMode"
color="primary"
icon="$save"
tooltip="Save"
@click="saveData"
></standard-button>
</div>
<div class="my-auto ml-auto mr-3">
<standard-button
:disabled="editMode"
color="colorbuttonsave"
icon="$edit"
tooltip="Edit"
@click="editMode = true"
></standard-button>
</div>
</v-card>
<v-tabs v-model="tabAktif" slider-color="headcolor" color="headcolor">
<v-tab :value="1" class="text-subtitle-2 text-none font-weight-bold">
Utama
</v-tab>
<v-tab :value="2" class="text-subtitle-2 text-none font-weight-bold"
>Biodata</v-tab
>
</v-tabs>
<v-tabs-window v-model="tabAktif">
<v-tabs-window-item :value="1">
<v-card class="overflow-y-auto" max-height="500">
<v-container v-if="loading" class="white lighten-5">
<v-row>
<v-col>
<v-skeleton-loader light type="paragraph"></v-skeleton-loader>
</v-col>
</v-row>
</v-container>
<v-container v-if="!loading" class="white lighten-5">
<v-row>
<v-col cols="12" sm="12">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="ID Pengguna"
v-model="form.username"
readonly
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
:edit-mode="editMode"
:error-messages="validate.textBox(v$.form.name)"
counter="100"
hint="Nama Anda"
label="Nama"
v-model="form.name"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Email"
readonly
v-model="form.email"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Dibuat Pada"
readonly
v-model="form.created_at"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Diperbaharui Pada"
readonly
v-model="form.updated_at"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-switch
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
:edit-mode="editMode"
:option-switch="optionSwitch"
hint="Status pengguna"
label="Status"
v-model="form.state"
></standard-switch>
</v-col>
</v-row>
</v-container>
</v-card>
</v-tabs-window-item>
<v-tabs-window-item :value="2">
<v-card class="overflow-y-auto" min-height="200" max-height="500">
<v-container v-if="loading" class="white lighten-5">
<v-row>
<v-col>
<v-skeleton-loader light type="paragraph"></v-skeleton-loader>
</v-col>
</v-row>
</v-container>
<v-container v-if="!loading" class="white lighten-5">
<v-row>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="ID Pengguna"
v-model="form.username"
readonly
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Badge Number"
v-model="form.badge_number"
readonly
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
:edit-mode="editMode"
:error-messages="validate.textBox(v$.form.name)"
counter="100"
hint="Nama Anda"
label="Nama"
v-model="form.name"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Nama Panggilan"
readonly
v-model="form.nama_panggilan"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Organisasi"
readonly
v-model="form.organization_id"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Jabatan"
readonly
v-model="form.jabatan_id"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
label="Jenis Kelamin"
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
readonly
v-model="form.jenis_kelamin"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Agama"
readonly
v-model="form.agama"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Tempat Lahir"
readonly
v-model="form.tempat_lahir"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Tanggal Lahir"
readonly
v-model="form.tgl_lahir"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Alamat Tinggal"
readonly
v-model="form.alamat_tempat_tinggal"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Telepon"
readonly
v-model="form.telp"
></standard-text-field>
</v-col>
<v-col cols="12" sm="12">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Pendidikan"
readonly
v-model="form.pendidikan"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Tanggal masuk"
readonly
v-model="form.hired_date"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Tanggal keluar"
readonly
v-model="form.resign_date"
></standard-text-field>
</v-col>
<v-col cols="12" sm="12">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Employee date"
readonly
v-model="form.employee_date"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Dibuat Pada"
readonly
v-model="form.created_at"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-text-field
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
label="Diperbaharui Pada"
readonly
v-model="form.updated_at"
></standard-text-field>
</v-col>
<v-col cols="12" sm="6">
<standard-switch
class="my-0 px-2 my-sm-1 ml-sm-0 smallheight"
:edit-mode="editMode"
:option-switch="optionSwitch"
hint="Status pengguna"
label="Status"
v-model="form.state"
></standard-switch>
</v-col>
</v-row>
</v-container>
</v-card>
</v-tabs-window-item>
</v-tabs-window>
</v-form>
</v-card>
</template>
<script>
import { mapActions } from "vuex";
import { usePaging } from "../../paging";
import { useVuelidate } from "@vuelidate/core";
import { required, maxLength } from "@vuelidate/validators";
import { validate } from "../../helper";
export default {
props: ["username"],
data: () => ({
loading: true,
form: {
username: "",
email: "",
name: "",
ponsel: "",
created_at: "",
updated_at: "",
state: "",
permissions: [],
},
optionSwitch: [
{ title: "Non Aktif", value: 0 },
{ title: "Aktif", value: 1 },
],
tabAktif: 1,
editMode: false,
confirmDialog: false,
validate: validate,
}),
validations: {
form: {
name: { required, maxLength: maxLength(100) },
},
},
methods: {
...mapActions("helper", ["showNotification"]),
getData() {
this.p$.getItemData(this.username + "/get").then((data) => {
this.form = data;
this.editMode = false;
});
},
saveData(e) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
var mf = this.form;
var post = new FormData();
post.append("name", mf.name);
post.append("state", mf.state);
this.p$.postItemData(this.username + "/update", post).then((data) => {
this.editMode = false;
this.showNotification({
type: "success",
msg: "Data berhasil disimpan",
});
});
},
},
mounted() {
this.getData();
},
setup() {
const v$ = useVuelidate();
const p$ = usePaging();
return { v$, p$ };
},
};
</script>
bagaimana caranya agar 1 tombol edit bisa di gunakan di dlam 2 tabs, misalnya saya menekan tombol edit di tabs 1 maka editmode tabs 2 false dan tidak terbuka editnya, begitu juga sebaliknya. mohon bantuannya makasih
0
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban