Question

我搞砸了vue-cli，并且遇到了一个问题。

我有一行24格，其生成方式如下：

 <template>
   <div class="row">
     <div class="hour" v-on:click="colorize" v-for="n in 24"></div>
   </div>
 </template>

我正在尝试根据VueX存储中保存的值来更改点击的hour div的背景颜色，但这不是重要的部分

这是我的方法：

methods: {
  colorize() {
    if(this.$store.state.picked === 1) {
      this.style.backgroundColor="rgb(103, 103, 103)";
    }
  }
}

商店正常工作，问题出在'this'属性，我使用的是我认为的错误。

有什么提示吗？：）

Answer 1

this是指Vue实例而不是clicked元素，因此您应该这样做：

 methods: {
   colorize(event) {
     if(this.$store.state.picked === 1) {
       event.target.style.backgroundColor="rgb(103, 103, 103)";
     }
   }
 }

new Vue({
  el: '#app',
  data() {
    return {
      elements: [
      {content:'content 1',tooltip:'tool tip 1'},
      {content:'content 2',tooltip:'tool tip 2'},
      {content:'content 3',tooltip:'tool tip 3'},
      {content:'content 4',tooltip:'tool tip 4'},
      ]
    }
  }
, methods: {
   colorize(event) {
 
       event.target.style.backgroundColor="rgb(103, 103, 103)";
     
   }
 }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app" data-app>

 <div class="row">
     <div class="hour" v-on:click="colorize" v-for="n in elements">
     {{n.content}}
     </div>
   </div>
</div>

单击更改生成的div的样式属性

1 个答案: