CODEWITHSUNDEEP
javascriptvue.js
strapstack
strapstack

Reputation: 3

Is it possible to write JavaScript directly in vue js?

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 class="customers-page">
      <h2>Customers</h2>

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

          <button type="add-customer" class="submit-customer-button" 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>

Upvotes: 0

Views: 202

Answers (2)

Remicaster
Remicaster

Reputation: 376

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 class="customers-page">
      <h2>Customers</h2>
      <button type="add" class="add-button" @click="openPopup()">Add</button>
      <div v-if="isShowPopup" class="popup">
          <h3>Input the following information</h3>
          <button type="add-customer" class="submit-customer-button" @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>

Upvotes: 0

Kaneki21
Kaneki21

Reputation: 1420

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 class="customers-page">
    <h2>Customers</h2>

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

      <button type="add-customer" class="submit-customer-button" @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

Upvotes: 3

Related Questions