vuejs3 - How to reformat date values? - Stack Overflow

I would like to create a function to reformat date fields without the (time) part.

• old value (1950-01-01 00:00:00)
• New value (1950-01-01).

but I can't manage to reassign this New value to my Porps: DataAgent.date_naissance.

I get this error message: ESLint: Unexpected side effect in computed function. (vue/no-side-effects-in-computed-properties).

Can you help me?

Thank you very much.

Child component :

 <div class="col-5 champ-dialog">
   <span class="Libelle-Titre">Date de naissance </span>
   <span v-if="ActionForm === variablesGlobals.create || ActionForm === 
 variablesGlobals.modification" class="required-marker">*</span>
   <q-input
           dense
          :disable="DisableDateNaissance"
          clearable
          clear-icon="close"
          :color="DataFormColor"
          type="date"
          v-model="DataAgent.date_naissance"
          lazy-rules
          :rules="[dateNaissNullRule, dateNaissRule]"/>
 </div>

Props:

const props = defineProps({
  BlocAgent: Object,
  FormColor: String,
  ActionForm: String
})
const DataAgent = reactive(props.BlocAgent)

Function :

const FormatedDateNaissance = computed(() => {
  const OldDate = DataAgent.date_naissance.split(' ')
 Eror HERE => DataAgent.date_naissance.value = OldDate[0]
  console.log(DataAgent.date_naissance.value)
  return DataAgent.date_naissance.value
})

console.log = 1950-01-01

return de laravel

I would like to create a function to reformat date fields without the (time) part.

• old value (1950-01-01 00:00:00)
• New value (1950-01-01).

but I can't manage to reassign this New value to my Porps: DataAgent.date_naissance.

I get this error message: ESLint: Unexpected side effect in computed function. (vue/no-side-effects-in-computed-properties).

Can you help me?

Thank you very much.

Child component :

 <div class="col-5 champ-dialog">
   <span class="Libelle-Titre">Date de naissance </span>
   <span v-if="ActionForm === variablesGlobals.create || ActionForm === 
 variablesGlobals.modification" class="required-marker">*</span>
   <q-input
           dense
          :disable="DisableDateNaissance"
          clearable
          clear-icon="close"
          :color="DataFormColor"
          type="date"
          v-model="DataAgent.date_naissance"
          lazy-rules
          :rules="[dateNaissNullRule, dateNaissRule]"/>
 </div>

Props:

const props = defineProps({
  BlocAgent: Object,
  FormColor: String,
  ActionForm: String
})
const DataAgent = reactive(props.BlocAgent)

Function :

const FormatedDateNaissance = computed(() => {
  const OldDate = DataAgent.date_naissance.split(' ')
 Eror HERE => DataAgent.date_naissance.value = OldDate[0]
  console.log(DataAgent.date_naissance.value)
  return DataAgent.date_naissance.value
})

console.log = 1950-01-01

return de laravel

• vuejs3

Share Improve this question Follow edited Jan 22 at 6:17 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Jan 21 at 14:32 Kaddour FellahKaddour Fellah 1122 bronze badges 3

• The error is being enforced by the eslint plugin of your IDE. It's not a normal JS compilation or runtime error. You should read more about it in the eslint documentation. You can turn off the rule, but it's in your best interest to not mutate state in a computed property as a matter of best practice – yoduh Commented Jan 21 at 15:58
• The compution block must be a pure function which returns a value and does not change the state. The DataAgent.date_naissance.value = OldDate[0] manipulates the state. You should move it in a separate watch block. – Raeisi Commented Jan 21 at 20:27
• Please do not upload images of code/data/errors. - Please edit and provide the code/data/errors as text. – DarkBee Commented Jan 22 at 6:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

As the ESLint error says: your computed has side-effect which means it does some updating and mutates the component state. It may introduce an infinite loop. The doc says:

It is considered a very bad practice to introduce side effects inside computed properties and functions. It makes the code not predictable and hard to understand.

You can simply avoid this by separating the computation and the mutation blocks.

import { computed, reactive, watch } from 'vue';

const props = defineProps({
  BlocAgent: Object,
  FormColor: String,
  ActionForm: String
})
const DataAgent = reactive(props.BlocAgent)

const FormatedDateNaissance = computed(() => {
  const OldDate = DataAgent.date_naissance.split(' ');
  return OldDate[0];
});

watch(FormatedDateNaissance, () => {
  DataAgent.date_naissance.value = FormatedDateNaissance.value;
});

Here, compute the FormatedDateNaissance value without changing the state, then watch for changes and proceed.

A similar question in Vue2.

Update full working code:

<!-- child component -->
<template>
  <q-input
    type="date"
    :model-value="dateOnly"
    @update:model-value="dateChanged"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineProps({
  formColor: {
    type: String,
  },
  actionForm: {
    type: String,
  },
})

// define a sync property.
const blocAgent = defineModel<{ date_naissance: string }>('blocAgent', {
  default: () => ({ date_naissance: '' }),
  required: true,
})

// always separate the date part only
const dateOnly = computed(() => blocAgent.value.date_naissance.split(' ')?.[0] || '')

// sync and update the model after separating date parts
function dateChanged(val: string | number | null) {
  blocAgent.value.date_naissance = (val?.toString() || '').split(' ')[0]!
}
</script>

And call in the parent component:

<!-- parent -->
<template>
  <child-component
    form-color="primary"
    action-form="action-form"
    v-model:bloc-agent="blockAgent"
  />
  <div>date_naissance: {{ blockAgent.date_naissance }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ChildComponent from 'components/ChildComponent.vue'

const blockAgent = ref({
  date_naissance: '1950-01-01 00:00:00',
})
</script>

I removed code that is not related to the question for brevity and used camelCase names for props.