如何重新格式化日期值？

Question

我想创建一个函数来重新格式化日期字段，而不需要（时间）部分。

• 旧值 (1950-01-01 00:00:00)
• 新值（1950-01-01）。

但我无法设法将此新值重新分配给我的 Porp：DataAgent.date_naissance。

我收到此错误消息：ESLint：计算函数中出现意外的副作用。 （vue/计算属性中无副作用）。

你能帮我吗？

非常感谢。

子组件：

 <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>

道具：

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

功能：

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
})

控制台.log = 1950-01-01

返回laravel

Answer 1

正如 ESLint 错误所述：您的

computed

有副作用，这意味着它会进行一些更新并改变组件状态。它可能会引入无限循环。 doc 说：

在计算属性和函数中引入副作用被认为是非常糟糕的做法。它使代码不可预测且难以理解。

您可以通过分离计算和突变块来简单地避免这种情况。

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;
});

在这里，在不更改状态的情况下计算

FormatedDateNaissance

值，然后观察变化并继续。

Vue2 中的类似问题。