EditMyLogView.vue

EditMyLogView.vue

<!-- src/views/EditMyLogView.vue -->
<template>
  <v-container>
    <v-card>
      <v-card-title style="font-size:1em">마이로그 수정</v-card-title>

      <v-form class="pa-3 mt-n6" ref="form" v-model="valid">

        <v-text-field label="제목" v-model="editedMylog.title" :rules="[v => !!v || 'Title is required']"></v-text-field>
        <v-textarea label="내용" rows="4" style="overflow-y: hidden;" v-model="editedMylog.content" :rules="[v => !!v || 'Content is required']"></v-textarea>
      
        <div class="mt-n4" style="text-align: right">
          <v-btn small text :disabled="!valid" @click="submitMylog">          
            수정 &nbsp; <v-icon>mdi-pencil</v-icon>
          </v-btn>
        </div>

        <div class="text-center">
          <v-progress-circular v-if="loading" indeterminate></v-progress-circular>
        </div>

      </v-form>
    </v-card>
  </v-container>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  props: {
    mylogId: {
      type: String,
      required: true,
    },
    mylog: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      editedMylog: { mylogId: this.mylogId, ...this.mylog }, // 초기값을 props로 전달된 post로 설정
      valid: false, // 유효성 검사
    };
  },
  computed: {
    ...mapGetters('mylogs',['loading']), 
  },
  methods: {    
    ...mapActions('mylogs', ['updateMylog']),
    async submitMylog() {
      if (this.$refs.form.validate()) {
        // Vuex 액션 호출하여 게시물 수정 
        await this.updateMylog({mylogId: this.mylogId, updatedData: this.editedMylog});        
        this.$router.push({ name: "mylog", params: { id: this.mylogId } });
      }
    },
  },
};
</script>