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

试试这个：

public enum{FIRST,SECOND,THIRD;}

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

1 个答案: