The process of retrieving an item from an HTML node using Vue.js

Question

The process of retrieving an item from an HTML node using Vue.js

My scenario involves a Vue app with the following data:

data: function() {
    return {
        items: [
            {id: 1, text: 'one', other_data: {}},
            {id: 2, text: 'two', other_data: {}},
            {id: 3, text: 'three', other_data: {}}
        ]
    }
}

The template is structured as follows:

<div v-for="item in items" id="my_items">
    <span>{{ item.text }}</span>
</div>

I am looking to access a specific item by using external JavaScript code, like this example:

let item_node = document.getElementById('my_items').children[1]; // Retrieve the 2nd child node of #my_items
item_node.__vuedata__ // This should represent the second item from the Vue data. {id: 2, text: 'two'...

Is there a way to achieve this functionality?

javascript vue.js

Answer 1

Answer №1

Vue suggests using the ref attribute instead of IDs and classes for DOM references. By utilizing ref with the v-for directive, child elements can now be referenced as an array of the ref. This means that each span will be accessed as hello[0] - hello[n]. The mounted code snippet displays the item.text for the first child element since it starts at index 0.

I've included a click listener that passes the value of item to a method every time you click on the element. This allows you to extract all values and perform any desired manipulations. I hope this meets your requirements.

<template>
  <div id="app">
    <div v-for="item in items" :key="item.id" ref='hello' @click="logItem(item)">
      <span>{{ item.text }}</span>
    </div>
  </div>

</template>

<script>

export default {
  name: "App",
  data: function() {
    return {
        items: [
            {id: 1, text: 'one', other_data: {}},
            {id: 2, text: 'two', other_data: {}},
            {id: 3, text: 'three', other_data: {}}
        ]
    }
  },
  methods: {
    logItem: (item) => console.log(item)
  },
  mounted: function() {
    console.log(this.$refs.hello[0].innerText)
  }
};
</script>

Answer 2

Vue suggests using the ref attribute instead of IDs and classes for DOM references. By utilizing ref with the v-for directive, child elements can now be referenced as an array of the ref. This means that each span will be accessed as hello[0] - hello[n]. The mounted code snippet displays the item.text for the first child element since it starts at index 0.

I've included a click listener that passes the value of item to a method every time you click on the element. This allows you to extract all values and perform any desired manipulations. I hope this meets your requirements.

<template>
  <div id="app">
    <div v-for="item in items" :key="item.id" ref='hello' @click="logItem(item)">
      <span>{{ item.text }}</span>
    </div>
  </div>

</template>

<script>

export default {
  name: "App",
  data: function() {
    return {
        items: [
            {id: 1, text: 'one', other_data: {}},
            {id: 2, text: 'two', other_data: {}},
            {id: 3, text: 'three', other_data: {}}
        ]
    }
  },
  methods: {
    logItem: (item) => console.log(item)
  },
  mounted: function() {
    console.log(this.$refs.hello[0].innerText)
  }
};
</script>

The process of retrieving an item from an HTML node using Vue.js

Answer №1

Similar questions

When using VueJs to loop through a list of options in a dropdown menu, the value of the selected option is showing as undefined instead of

Utilizing Multiple Checkboxes for Precision Search Refinement

Is there a way to establish the starting content/value for this tinymce editor?

Adjusting the character limit for my textarea input

Organizing with dynamic attributes within angularJS

Improving communication between Components in ReactJS

Do global variables in a node.js server apply across the entire server or exclusively to individual sessions or users?

Position an element with absolute positioning to the right edge of a relative element

The callback function of jQuery getJSON would sometimes not be triggered

Typescript double-sided dictionary: a comprehensive guide

I am facing difficulty showing JSON data using Vue.js

What is the process for sorting Google Map markers with AngularJS?

Encountering Issues with Importing vue-router in Vue.js 3 - What Could be the Problem?

Flask API returning error: Missing 'Access-Control-Allow-Origin' header for POST requests

Implementing promises in Node JS Express

Trouble encountered in PHP: Generating a file from POST data and initiating download prompt for the user not functioning as intended

Dealing with Database Timeout in Express JS

Error: The function loadJSON has not been declared

If there is an error in retrieving data from the PHP file using `$.getJSON

Using JavaScript with Selenium, you can easily clear the input field and send