Question: Using a procedure adds an employee record into the employee table, also validates the input values salary must be always greater than or equal to 500, raise a user-defined exception for any validation error.

Answer: 
Here is the code from plain JS to Vue2
<https://codesandbox.io/s/peaceful-http-2n9y7?file=/src/components/SelectionBox.vue>

1. The `onclick` event in JS can be translated to `@click` in Vue

```js
checkList.getElementsByClassName('anchor')[0].onclick
// to
<span class="anchor" @click="anchorOnClick">Select Fruits</span>

```

2. methods contain function

```
methods: {
   // function
   anchorOnClick: function (event) { 
     // do something
   }
}

```

3. Using `expanded` variable to control `.visible` class

```
<div
    class="dropdown-check-list"
    :class="{ visible: expanded }" // binding class
    tabindex="100"
>
   ....
</div>

anchorOnClick: function (event) { 
    this.expanded = !this.expanded;
}

```

Binding class reference: <https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes>
Here is the complete answer with the toggle and how to handle the data binding for the inputs:

```
<template>
  <div>
    <div id="list1" class="dropdown-check-list" tabindex="100" :class="fruitsListvisible ? 'visible' : ''">
      <span class="anchor" @click="toggleFruitList">Select Fruits</span>
      <ul class="items">
        <li><label for="Apple"><input v-model="selectedFruits" id="Apple" value="Apple" type="checkbox" />Apple</label></li>
        <li><label for="Orange"><input v-model="selectedFruits" id="Orange" value="Orange" type="checkbox" />Orange</label></li>
        <li><label for="Grapes"><input v-model="selectedFruits" id="Grapes" value="Grapes" type="checkbox" />Grapes </label></li>
        <li><label for="Berry"><input v-model="selectedFruits" id="Berry" value="Berry" type="checkbox" />Berry </label></li>
        <li><label for="Mango"><input v-model="selectedFruits" id="Mango" value="Mango" type="checkbox" />Mango </label></li>
        <li><label for="Banana"><input v-model="selectedFruits" id="Banana" value="Banana" type="checkbox" />Banana </label></li>
        <li><label for="Tomato"><input v-model="selectedFruits" id="Tomato" value="Tomato" type="checkbox" />Tomato</label></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruitsListvisible: false,
      selectedFruits: [],
    };
  },
  methods: {
    toggleFruitList() {
      this.fruitsListvisible = !this.fruitsListvisible;
    },
  },
};
</script>

<style scoped>
  .dropdown-check-list {
    display: inline-block;
  }
  .dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid #ccc;
  }
  .dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
  }
  .dropdown-check-list ul.items {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
  }
  .dropdown-check-list ul.items li {
    list-style: none;
  }
  .dropdown-check-list.visible .anchor {
    color: #0094ff;
  }
  .dropdown-check-list.visible .items {
    display: block;
  }
</style>

```

<https://codepen.io/jeremykenedy/pen/yLMBwBP>