Add or removing a class to a element in a child component

Question

I've recently hit a wall with vue. Currently we three components Parent.vue ChildOne.vue and ChildTwo.vue. Parent Passes some object data (from a state) to the ChildOne component.

The ChildOnecomponent has the ChildTwo component as a custom element. On that custom element <ChildTwo></ChildTwo> we have a v-for loop that loops through the data and the ChildTwo component is just for html formatting the data.

What I want to is on a click add a custom class .selected to a div and remove it from the other div if selected, much like my example here. https://codepen.io/david-wh/pen/gOrzQVR

Here is a sandbox of the full app I'm using: https://codesandbox.io/s/onclick-forked-tkkre

Parent

<template>
  <div>
    <ChildOne :container-slot-data="ObjectData"></ChildOne>
  </div>
</template>

<script>
import ChildOne from "./childComponentOne.vue";
export default {
  name: "HelloWorld",
  components: {
    ChildOne
  },
  data() {
    return {
      ObjectData: [
        {
          id: "1",
          name: "foo",
          type: "aug",
          subType: "1"
        },
        {
          id: "2",
          name: "bar",
          type: "aug",
          subType: "2"
        },
        {
          id: "3",
          name: "foobar",
          type: "gear",
          subType: "6"
        }
      ]
    };
  }
};
</script>

ChildOne

<template>
  <div class="Testing">
    <ChildTwo v-for="(itemData, index) in containerSlotData" :key="index" :item-data="itemData"></ChildTwo>
  </div>
</template>

<script>
import ChildTwo from "./childComponentTwo.vue";
export default {
  name: "ChildOne",
  components: {
    ChildTwo
  },
  data() {
    return {
      current: null
    };
  },

  props: {
    containerSlotData: {
      type: Array,
      default: null
    }
  }
};
</script>

ChildTwo

<template>
  <!-- <div class="selected"> -->
  <div>
    <ul>
      <li>{{ itemData.id }}</li>
      <li>{{ itemData.name }}</li>
      <li>{{ itemData.subType }}</li>
    </ul>
    <hr>
  </div>
</template>

<script>
export default {
  name: "Childtwo",
  data() {
    return { current: null };
  },

  props: {
    itemData: {
      type: Object,
      default: null
    }
  }
};
</script>

wilkoklak wilkoklak · Accepted Answer · 2020-09-12T18:53:22

If all you want to do is to toggle the class on the elements, I suggest:

In ChildOne add a selectedItem to data and set it with @click handler.

In ChildTwo add a @click hanlder that will emit click event to the ChildOne compontent.

You can see a working example forked from your CodeSandbox here

I have added font-weight: bold to the .selected class to make it visible.

Add or removing a class to a element in a child component

1 Answers