Vue JS v-bind 数据不会更新 v-footer 标记中的反应性

Question

使用 Vue 和 vuetify 我遇到了 v-footer 元素的问题。 v-bind 数据不会更新 v-footer 标记中的反应性

见下方代码

  <template>
 <div>
  <v-footer class="pa-3">
    <v-spacer></v-spacer>
    <div>© {{ new Date().getFullYear() }}</div>
      <!-- it doesn't work -->
      <p :style="mystyle"> TEST </p>
      <v-btn @click="changeStyle">ChangeStyle</v-btn>
      <!-- it doesn't work -->
  </v-footer> 
      <!-- it works -->
      <p :style="mystyle"> TEST </p>
      <v-btn @click="changeStyle">ChangeStyle</v-btn>
      <!-- it works -->
    </div>
</template>
<script>
    export default{
        data () {
          return {
            mystyle:{
            opacity : 0, 
            color: 'red'},
          }
        },
       methods: {
          changeStyle(){
        this.mystyle.opacity = 1
    }
       } 
    }
</script>

同时，如果我在模板中添加代码 {{labelStyle.opacity}} 一切正常。

Answer 1

试试这个：

showLabel() {
    this.$set(this.labelStyle, 'opacity', 1);
}