根据道具的值使用数据或计算属性。道具被变异

Question

我在 vue 中打开了一个模态，但我从导航器的控制台中收到了下一个错误：

避免直接改变prop，因为值会被覆盖 每当父组件重新渲染时。相反，使用数据或 基于道具值的计算属性。道具被变异： “表演任务”

它说我应该使用计算属性，并且我已经检查了其他解决方案，但是它们中的任何一个都可以解决它，因为我使用的是打字稿，在这种特殊情况下如何使用计算属性来解决它？

在这种情况下，它指的是模态到我的子组件，模态：

<template>
  <v-row justify="space-around">
    <v-col cols="auto">
      <v-dialog
        transition="dialog-bottom-transition"
        v-model="showTask"
        max-width="600"
      >
        <template>
          <!--  -->
          <v-card class="p-5">
            <v-row>
              <v-col cols="12" sm="8">
                <h1 class="is-size-4">Miembros del equipo</h1>
              </v-col>
              <v-col class="d-flex justify-end" cols="12" sm="4">
                <v-btn icon>
                  <v-icon aize="10" @click="showTask = false"
                    >fas fa-close</v-icon
                  >
                </v-btn>
              </v-col>
            </v-row>
            <v-form ref="form" lazy-validation>
              <!-- Autocomplete de usuarios -->
              <!-- nota: "Autocomplete recibe solamente un valor del objeto que se le pasa, en este caso se declara con item-value="id" -->
              <v-autocomplete
                v-model="UsersIn"
                :items="users"
                item-text="name"
                item-value="id"
                :disabled="isUpdating"
                chips
                filled
                label="Agregar Miembros"
                persistent-hint
                 multiple
              >
                <template v-slot:selection="data">
                  <!-- Chips dentro del field -->
                  <v-chip
                    v-bind="data.attrs"
                    :input-value="data.selected"
                    close
                    @click="data.select"
                    @click:close="remove(data.item)"
                  >
                    <v-avatar left>
                      <v-img :src="data.item.Photo"></v-img>
                    </v-avatar>
                    {{ data.item.name }}
                  </v-chip>
                </template>
                <template v-slot:item="data">
                  <template>
                    <v-list-item-avatar>
                      <v-avatar color="red">
                        <img :src="data.item.Photo">
                      </v-avatar>
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title
                        v-html="data.item.name"
                      ></v-list-item-title>
                      <v-list-item-subtitle
                        v-html="data.item.group"
                      ></v-list-item-subtitle>
                    </v-list-item-content>
                  </template>
                </template>
              </v-autocomplete>
            </v-form>
            <!-- Iconos -->
          </v-card>
        </template>
      </v-dialog>
    </v-col>
  </v-row>
</template>

<script lang="ts">
export default {
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  data: () => {
     const srcs = {
        1: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
        2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
        3: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
        4: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
        5: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
      }
    return {
      autoUpdate: true,
      friends: ['Sandra Adams', 'Britta Holt'],
      isUpdating: false,
      name: 'Midnight Crew',
      UsersIn: [{}],
      headers: [
        {
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: '', value: 'photo' },
        { text: '', value: 'name' },
      ],
      title: 'The summer breeze',
      users: [
        {
          initials: 'CA',
          Photo: srcs[1],
          name: 'Carlos',
          id: 2
        },
        {
          Photo: srcs[2],
          name: 'Luther',
          initials: 'Lu',
          id: 1
        },
          {
          Photo: srcs[3],
          name: 'Lutherino',
          initials: 'Lu',
          id: 3
        },
      ],
    }
  },
 watch: {
      isUpdating (val: boolean): void {
        if (val) {
          setTimeout(() => (this.isUpdating = false), 3000)
        }
      },
    },
  props: {
    showTask: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    remove (user: any) {
        var index = this.UsersIn.indexOf(user.id)
        if (index >= 0) this.UsersIn.splice(index, 1)
      },
  },
}
</script>

我正在使用这种方法将“showTask”状态更改为我的父组件：

 <add-members-modal :showTask.sync="ShowModal"></add-members-modal>

 <v-btn color="#fff" elevation="0" @click="showModal"
      ><v-icon color="#000A21" class="mx-1" size="18"
        >fas fa-user-plus</v-icon
      >Añadir / 1</v-btn
    >

<script lang="ts">
       methods: {
        showModal (): void {
          this.ShowModal = false
          this.ShowModal = true
        }
</script>

Answer 1

为避免此错误，您可以使用 Vuejs 的双向绑定概念。 您可以在其中将父组件的 showTask 变量绑定到您的子组件中。

可以关注这篇文章，这篇文章就是基于这个问题写的。

Two way binding of dialogs in Vuejs