How to write method in vuejs using js code?

Question

My codepen link https://codepen.io/santoshch/pen/LYWPMQy

export default {



    data() {
        return {
            expanded: false,
        };
    },




    methods: {

        var checkList = document.getElementById('list1');
        checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
          if (checkList.classList.contains('visible'))
            checkList.classList.remove('visible');
          else
            checkList.classList.add('visible');
        }

    },
};

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
}

Facing an issue, when trying to convert the js code to vuejs. in the method i tried writting the js code. but getting error.

Move your code into mounted function:v3.vuejs.org/api/options-lifecycle-hooks.html#mounted. But seeing your code I think you should first take an introduction tutorial to vue js. Using getElementsByClassName inside vuejs is rarely a solution. This probably reflects a misunderstanding of the framework. — ZecKa
– ZecKa, Commented May 5, 2021 at 6:53

tony19 · Accepted Answer · 2022-07-15 02:24:28Z

4

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

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

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

methods contain function

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

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

edited Jul 15, 2022 at 2:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 5, 2021 at 7:00

Mic Fung

5,7102 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jeremykenedy · Accepted Answer · 2021-05-05 08:03:18Z

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

Collectives™ on Stack Overflow

How to write method in vuejs using js code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related