Vue 改变了一个用作“v-model”的属性

Question

很多这样的问题，但我找不到我的方式。我简化了代码来解释我的问题...... 只是想要一个可重用的反馈消息来显示使用 vuetity 和 snackbar 小部件的其余 api 的结果。 在父组件中：

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

反馈组件：

<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

只需将您的 active 属性复制到组件数据部分的某个属性中，然后在数据部分中使用和更改该属性即可。

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