Vue js 2.6.13 component not rendering

Viewed 423

After upgrading vue js from v2.6.12 to v2.6.13 some components don't get render and no warning message or error message in the console. but when I try to downgrade to version 2.6.12, the component successfully render.

Component code that doesn't get render using v2.6.13

<script>
export default {
  props: {
    rules: {
      type: [String, Object],
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    vid: {
      type: String,
      default: undefined,
    },

    value: {
      type: [String, Number],
      default: '',
    },
    type: {
      type: String,
      default: 'text',
    },
    placeholder: {
      type: String,
      default: '',
    },
    label: {
      type: Boolean,
      default: false,
    },
    autocomplete: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    ariaLabel: {
      type: String,
      default: '',
    },
  },

  data: () => ({
    currentValue: '',
  }),

  computed: {
    isRequired() {
      if (this.rules.includes('required')) return true;
      return false;
    },
  },

  watch: {
    value: {
      handler(after) {
        this.currentValue = after;
      },
      immediate: true,
    },
  },

  methods: {
    handleInput() {
      this.$emit('input', this.currentValue);
    },
  },
};
</script>

<template>
  <ValidationProvider
    v-slot="{ errors }"
    tag="div"
    class="form-group"
    :rules="rules"
    :name="name"
    :vid="vid"
  >
    <label
      v-if="label"
      :for="name"
      class="form-label"
    >
      {{ name }}
    </label>

    <input
      :id="name"
      v-model="currentValue"
      :type="type"
      :class="['form-control', { 'is-invalid': errors[0] }]"
      :placeholder="placeholder"
      :autocomplete="autocomplete"
      :disabled="disabled"
      :aria-label="ariaLabel"
      @input="handleInput"
    >
    <span class="invalid-feedback">{{ errors[0] }}</span>

    <small class="form-help">
      <slot name="form-help" />
    </small>
  </ValidationProvider>
</template>

The code and try changing the vue version codesandbox, why is the component not rendering?

1 Answers
Related