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

avatar chrrriann
@chrrriann

15 Kontribusi 2 Poin

Dipost 2 minggu yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban