Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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