Vue изменяет свойство, которое используется как "v-модель"

Question

Многие проблемы, как это, но я не могу найти свой путь. Я упростил код, чтобы объяснить мою проблему ... Просто хотел, чтобы сообщение обратной связи многократного использования отображалось с результатом оставшегося API, используя виджет vuetity andsnackbar. В родительском компоненте:

<Feedback :active="hasFeedback" :msg="feedbackMsg" />

Компонент Feedback:

<template>
  <v-snackbar v-model="active" >
    {{ msg }}
    <v-icon @click="active = false">mdi-close-thick</v-icon>
  </v-snackbar>
</template>
<script>
export default {
  components: {},
  props: ["active", "msg"]
};
</script>

Я пытался добавить вычисляемое свойство, методы, getter, setter, но всегда получал ошибку.

Answer 1

Просто скопируйте вашу активную опору в некоторую опору в разделе данных компонента и используйте и измените эту опору в разделе данных.

<template>
  <v-snackbar v-model="isActive" >
    {{ msg }}
    <v-icon @click="isActive = false">mdi-close-thick</v-icon>
  </v-snackbar>
</template>
<script>
export default {
  components: {},
  props: {
    active: {
      type: Boolean,
      default: false
    }, {
    msg: {
      type: String
    }
  },
  data () {
    return {
      isActive: this.active
    }
  }
};
</script>