Is it possible to write JavaScript directly in vue js?-CodePudding

New to vuejs. I am trying to write javascript directly in the vue file. Below is the code. I keep getting the following errors...

compiled with problems

 70:18  error  'openpopup' is defined but never used   no-unused-vars
 73:18  error  'closepopup' is defined but never used  no-unused-vars

Html with script:

<template>
   <div >
      <h2>Customers</h2>

      <button type="add"  onclick="openpopup()">Add</button>
      <div  id="popup">
          <h3>Input the following information</h3>

          <button type="add-customer"  onclick="closepopup()">Submit</button>
        
        
      </div>  
   </div>

</template>

<script type="application/javascript" >
        let popup = document.getElementById("popup");

        function openpopup(){
            popup.classList.add("open-popup")
        }
        function closepopup(){
            popup.classList.remove("open-popup")
        }
</script>

CodePudding user response：

The very purpose to use Vue is to leverage its features for handling this type of logic reactively, Following is the snippet which can be used(vue 3 options api)

<template>
  <div >
    <h2>Customers</h2>

    <button type="add"  @click="openpopup">Add</button>
    <!-- onclick="openpopup()" -->
    <div  :>
      <h3>Input the following information</h3>

      <button type="add-customer"  @click="closepopup">Submit</button>
      <!-- onclick="closepopup()" -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popupToggle: false,
    };
  },
  methods: {
    openpopup() {
      this.popupToggle = true;
    },
    closepopup() {
      this.popupToggle = false;
    },
  },
};
</script>

Here the popup view is maintained by a state variable popupToggle, if you want to use something similar to id then you should go through refs here

CodePudding user response：

When you use frameworks like Vue / React etc, using the native DOM is discourage (basically those .getElementById, .classlist.add or similar). One main reason is security, anyone can go to inspect and do DOM manipulations.

If you want to avoid the Options API boilerplate, you can use Composition API, which is similar to what you are doing.

Besides, if you are using conditional rendering, v-if is recommended instead of class binding, because the elements are not rendered if it is false.

<template>
   <div >
      <h2>Customers</h2>
      <button type="add"  @click="openPopup()">Add</button>
      <div v-if="isShowPopup" >
          <h3>Input the following information</h3>
          <button type="add-customer"  @click="closePopup()">Submit</button>
      </div>  
   </div>
</template>

<script setup>
import { ref } from 'vue' 
const isShowPopup = ref(false)// acts similar to options api data block

// here I am using arrow functions
const openPopup = () => {
  isShowPopup.value = true // in composition API, instead of using this., you use .value
}

const closePopup = () => {
  isShowPopup.value = false
}

</script>