I am seeking to capture the @click event in JavaScript to dynamically create a DOM element in Vue.js (or Nuxt.js)

Question

I am seeking to capture the @click event in JavaScript to dynamically create a DOM element in Vue.js (or Nuxt.js)

HTML

<button @click="createEle()" id="btn1">click</button>

vue

methods: {
   createEle() {
      let aEle = document.createElement("a")
      aEle.classList.add("btn2")
      aEle.innerHTML = "Button 2";
      document.body.appendChild(aEle)
   },
   getBtn2() {
      console.log(document.querySelector('.btn2').innderHTML)
   }
}

result my code after click Button #btn1

<button id="btn1">click</button>
<a class="btn2">Button 2</a>

but How to add the @click event to .btn2 to call the function getBtn2()

javascript vue.js nuxt.js

Answer 1

Answer №1

In this template:

   <button @click="createLink()" id="btn1">Click me</button>
   <a v-for="link in hyperlinks" :href="link.url" class="link-btn"&tg;{{link.text}}</a>

In the script section:

    data(){
      return {
          hyperlinks: [],
      }
    },
    methods:{
      createLink() {
        const newHyperlink = { url: "https://www.example.com/", text: "Example Site" };
        this.hyperlinks.push(newHyperlink);
      },
      displayLinks() {
         this.hyperlinks.forEach(item => console.log(item.text) );
      }
    }

Answer 2

In this template:

   <button @click="createLink()" id="btn1">Click me</button>
   <a v-for="link in hyperlinks" :href="link.url" class="link-btn"&tg;{{link.text}}</a>

In the script section:

    data(){
      return {
          hyperlinks: [],
      }
    },
    methods:{
      createLink() {
        const newHyperlink = { url: "https://www.example.com/", text: "Example Site" };
        this.hyperlinks.push(newHyperlink);
      },
      displayLinks() {
         this.hyperlinks.forEach(item => console.log(item.text) );
      }
    }

I am seeking to capture the @click event in JavaScript to dynamically create a DOM element in Vue.js (or Nuxt.js)

Answer №1

Similar questions

Tips to transfer an item in an array to another array using Vue JS

intervals should not be attached after being cleared by a condition

Presenting information with Jqgrid

Accessing attribute value of selected option in AngularJS select element

Is there a method to prevent the json file from being constantly overwritten?

Issue with JQuery .when function occurring when not enclosed within a code block

Encountered a POST Error while attempting to access a backend function from the frontend in a React application, resulting in

Error encountered when attempting to destructure Object.entries() within a for-loop

Enhance your webpage by incorporating a CSS subclass using jQuery's addClass

The selected value is not displayed in the Material UI select component

showcasing recommended options in the search bar through the use of javaScript

Escaping double quotes in dynamic string content in Javascript can prevent unexpected identifier errors

Vite, Vue, and Vuetify: A multitude of inexplicable network requests happening

Exploring the power of Mongoose.js and using the query object with Regular Expressions

Strategies for optimizing progressive enhancement

The page keeps scrolling to the top on its own, without any input from me

Converting a JSON array into a singular object using Node.js

Extract an object array from the object and combine it into one cohesive unit

Adding fresh information to a data entity

Watching a live video stream in real-time using WebRTC with React