Question

我创建了一个自定义DateField组件。一切正常，但出现错误Avoid mutating the prop 'value'。当我通过单击Cancel按钮或在外部单击关闭菜单时，就会发生这种情况。

这是我的代码-

<template>
  <v-menu
    :close-on-content-click="false"
    :return-value.sync="value"
    max-width="290px"
    min-width="290px"
    offset-y
    ref="menu"
    transition="scale-transition"
    v-model="menu"
  >
    <template v-slot:activator="{ on }">
      <v-text-field
        :label="label"
        :placeholder="placeholder"
        :value="value"
        @input="$emit('input', $event)"
        v-on="on"
        :hint="hint"
      />
    </template>
    <v-date-picker
      :value="dateValue"
      @change="$emit('input', $event)"
      no-title
      scrollable
      :type="type"
    >
      <v-spacer/>
      <v-btn @click="menu = false" color="primary" text>Cancel</v-btn>
      <v-btn @click="$refs.menu.save(value)" color="primary" text>OK</v-btn>
    </v-date-picker>
  </v-menu>
</template>

Answer 1

您没有提供脚本部分，所以我将做一些假设。

在任何情况下，您都可以使用 $ emit 将信号发送到“父亲组件（通过菜单项的组件）”，并且您可以使用以下命令在父亲组件中接收该信号@emitName并在那里更改值

示例：

<v-btn @click="$emit('cancel')" color="primary" text>Cancel</v-btn>

在父组件中：

<SonComponent :menu="menuData" @cancel="menu=false" />

您可以从此here

了解更多信息

希望这会有所帮助。

避免在Vue JS中直接更改道具错误

1 个答案: