Изменить атрибут стиля сгенерированного div при клике - PullRequest
Новая
       7

Изменить атрибут стиля сгенерированного div при клике

0 голосов
/ 30 января 2019

Я возлюсь с vue-cli и сталкиваюсь с проблемой.

У меня есть строка из 24 div, которые генерируются так: 

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

I 'Я пытаюсь изменить цвет фона hour div, на который нажали, основываясь на сохраненном значении в магазине VueX, но это не важная часть

Вот мои методы: 

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

Магазин работает, проблема связана с атрибутом this, который я использую неправильно.

Есть советы?:)

1 Ответ

0 голосов
/ 30 января 2019

this относится к экземпляру Vue, а не к нажатому элементу, поэтому вы должны сделать: 

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