Persistent

dialog를 구현하던 도중 v-model과 dialog를 연결시켜 주었는데도

Computed property “dialog” was assigned to but it has no setter.

라는 dialog setter가 없다는 오류가 발생했다.

구현 코드

<template>
  <div>
    <v-layout row justify-center>
      <v-dialog
          v-model="dialog" persistent
          width="500">

			// ...
      </v-dialog>
    </v-layout>
  </div>
</template>


<script>
export default {
  name: 'PostWrite',

  computed: {
    dialog() {
      return this.$store.state.writeModal
    },
  },

  methods: {
    setWriteModal() {
      this.$store.commit('setWriteModal', false)
    },
  },
}
</script>

Vuex에서 mutation도 다 정의가 됐는데도 오류가 발생하여 한참을 찾았다.

해결 방법

v-dialog 태그에 persistent 옵션을 추가하여 해결하였다

vuetify에서 persistent 옵션을 찾아보니

Clicking outside will not dismiss the dialog

라고 되어있다

외부에서 dialog를 요청해도 무시하지 않는 다는 의미인것 같다

• ← Previous Post
• Next Post →