How to make Vue's (v2) v-model or syncable props optional?

DanCharousek — Sat, 01 May 2021 22:45:39 +0000

Long story short

Use computed with getter and setter that conditionally use either passed property or internal data.

Component definition:

<!-- FooModal.vue -->
<template>
  <div v-show="syncShow">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.    
    <button @click="syncShow = false">
      Close self
    </button>
  </div>
</template>

<script>
export default {
  props: {
    // property that controls the visibility of the modal (if used)
    show: {
      type: Boolean,
      required: false,
      default: null
    }
  },

  data: () => ({
    // internal state for cases where prop is not defined
    intShow: true
  }),

  computed: {
    // proxy computed that uses either internal state
    // or passed property (if present).
    syncShow: {
      get () {
        return this.show === null
          ? this.intShow
          : this.show;
      },

      set (val) {
        if (this.show === null) {
          this.intShow = val;
        } else {
          this.$emit('update:show', val);
        }
      }
    }
  }
}
</script>

And then, it's usage:

<!-- App.vue -->
<template>
  <div id="app">
    <!--
      You can control the visibility from the parent scope.
    -->
    <FooModal :show.sync="showFoo" />

    <!--
      Or you can let the component handle it.
    -->
    <FooModal />
  </div>
</template>

<script>
import FooModal from './components/FooModal.vue'

export default {
  components: {
    FooModal
  },
  data: () => ({
    showFoo: true
  })
}
</script>

Let me know if you use any other way to achieve the same.

Dan

Hi dev.to 👋

DanCharousek — Sat, 01 May 2021 15:44:16 +0000

I've been doing web development for over a decade now and I really love to share my knowledge with others (colleagues at work or students I teach). I've attempted many times to broaden my target audience with written articles, but failed most of the times. Some times I am not satisfied with the quality, some times I just fail to plan my time to write. This is another attempt to break this rule, so I decided not to overthink my first post here and just say hi.

I hope this time, I'll stick around.

Have a great day everyone,
Dan

DEV Community: DanCharousek

How to make Vue's (v2) v-model or syncable props optional?

Long story short

Hi dev.to 👋