时间戳

首页 > 解决方案 > Vue 改变了一个用作“v-model”的属性

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

问题描述

很多这样的问题，但我找不到我的方式。我简化了代码来解释我的问题......只是想要一个可重用的反馈消息来显示使用 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，但总是出错。

标签： vuejs2vue-componentvuetify.js

解决方案

只需将您的活动道具复制到组件的数据部分中的某个道具，然后在数据部分中使用和更改该道具。

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

推荐阅读