[Vuejs]-Vuejs setting reactive style to component in v-for with vuex data

by

0👍

I hope I was able to correctly reflect what you were trying to accomplish. I used a v-for on the template tag and after that line you could access the item.completed boolean value. I had to use a span element inside the tr to apply the styling.

Vue.createApp({
  data() {
    return {
      List: [ // comes from your vuex
        {
          name: 'one',
          completed: true,
        },
        {
          name: 'two',
          completed: false,
        }
      ]
    }
  },
  methods: {
      rowClick(item) {
        console.log(item)
      }
    }
}).mount('#demo')
<script src="https://unpkg.com/vue@next"></script>

<table id="demo">
  <template v-for="(item, i) in List">
   <tr>
     <span @click="rowClick(item)" :style="item.completed ? { 'background-color': 'red' } : { 'background-color': 'blue' }">{{ i }}: {{ item.name }}</span>
    </tr>
  </template>
</table>

I think it could be solved a little bit cleaner. What do you think? Does it goes in the right direction?

Leave a comment