CODEWITHSUNDEEP
vue.jsvuejs2
Finchy70
Finchy70

Reputation: 473

Set css class for single items in v-for loop

I am playing around with Vue.js and I am trying to change the class of individual items in a v-for route dependent on a checkbox.

<template>
    <div>
        <ul>
            <div :class="{completed: done}" v-for="things in items">
                <h6 v-bind:key="things"> {{things}} - <input @click="stateChange" type="checkbox"/></h6>
            </div>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'ItemList',
        data() {
            return {
                items: [],
                done: false
            }
        },
        mounted() {
            Event.$on('itemAdded', (data) => {
                this.items.push(data);
            })
        },
        methods: {
            stateChange() {
                this.done = !this.done;
            }
        }
    }
</script>

<style>
    .completed {
        text-decoration-line: line-through;
    }
</style>

The above code places a line through every item, not just the checked one.

Shopping List Image

How do I code so only the checked item is crossed out?

Thanks Paul.

Upvotes: 2

Views: 3463

Answers (2)

Finchy70
Finchy70

Reputation: 473

@Axnyff You were very close. Thank you. Here is the little changes I made to get it working.

<template>
    <div>
        <ul>
            <div :class="{completed: item.done}" v-for="item in items">
                <h6> {{item.data}} - <input @click="item.done = !item.done" type="checkbox"/></h6>
            </div>
        </ul>
    </div>
</template>


<script>
    export default {
        name: 'ItemList',
        data() {
            return {
                items: [],
            }
        },
        mounted() {
            Event.$on('itemAdded', (data) => {
                this.items.push({ data, done: false });
                console.log("DATA- ", this.items)
            })
        },
        methods: {


        }
    }
</script>

<style>
    .completed {
        text-decoration-line: line-through;
    }
</style>

Upvotes: 0

Axnyff
Axnyff

Reputation: 9944

It looks like you have only one done property. You should have a done property for each element in your items array for this to work. Your item should like {data: 'somedata', done: false }

This should work:

<template>
  <div>
      <ul>
          <div :class="{completed: item.done}" v-for="(item,index) in items">
              <h6 v-bind:key="things"> {{item.data}} - <input @click="stateChange(item)" type="checkbox"/></h6>
          </div>
      </ul>
  </div>
</template>


<script>
  export default {
      name: 'ItemList',
      data() {
          return {
              items: [],
          }
      },
      mounted() {
          Event.$on('itemAdded', (data) => {
              this.items.push({ data, done: false });
          })
      },
      methods: {
          stateChange(changeIndex) {
            this.items = this.items.map((item, index) => {
              if (index === changeIndex) {
                return {
                  data: item.data,
                  done: !item.done,
                };
              }
              return item;
            });
          }
      }
  }
</script>

<style>
  .completed {
      text-decoration-line: line-through;
  }
</style>

Upvotes: 3

Related Questions