Having trouble accessing a value in Vue.js from the data object

Question

Having trouble accessing a value in Vue.js from the data object

I'm facing an issue with displaying data pulled from an API in my vue console. Despite it showing up there, I can't seem to get it to show in my markup. Specifically, the advertiser_id field always appears blank even though other data like clicks, earnings, and orders display fine using v-html.

Could this be due to the data being somehow read-only or protected? I find it strange that it shows up in the vue console if that were the case.

The structure of the API response is as follows:

{
  "1": {
    "advertiser_id": "3184",
    "clicks": "27,577",
    "orders": "10,722",
    "earnings_per_click": "257.11",
  },
}

javascript vue.js

Answer 1

Answer №1

If my interpretation is correct, it could be implemented as shown in the code snippet below (utilizing v-for for object iteration)

const app = Vue.createApp({
  data() {
    return {
      item: {
        "1": {
          "advertiser_id": "3184",
          "clicks": "27,577",
          "orders": "10,722",
          "earnings_per_click": "257.11",
        },
      }
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(val, key, i) in item['1']" :key="i">
    {{ key }} - {{ val }}
  </div>
</div>

Answer 2

If my interpretation is correct, it could be implemented as shown in the code snippet below (utilizing v-for for object iteration)

const app = Vue.createApp({
  data() {
    return {
      item: {
        "1": {
          "advertiser_id": "3184",
          "clicks": "27,577",
          "orders": "10,722",
          "earnings_per_click": "257.11",
        },
      }
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(val, key, i) in item['1']" :key="i">
    {{ key }} - {{ val }}
  </div>
</div>

Having trouble accessing a value in Vue.js from the data object

Answer №1

Similar questions

My React application did not display properly after deploying it on GitHub Pages

JavaScript consistently returns HiddenField as NULL

Exploring ways to retrieve a parent div from a child window

Preventing multiple clicks by toggling the HTML tag on and off

Is there a solution to successfully retrieving the value of res from the readCsv() method instead of it returning undefined?

onload function prevents further URL redirection

Mapping an array based on specific conditions

Tips for managing a fixed-positioned element during scrolling and zooming events

Explore jQuery to locate a specific anchor element that has a matching URL and then apply a new class

Storing a reference within another reference can diminish its reactivity

The userscript is designed to function exclusively on pages originating from the backend, rather than on the frontend in a single-page application

"Exploring the world of AngularJS through Onsen's API

What is the best way to determine the total number of pages for posts

Can dynamic variables be incorporated within a const?

Displaying column data in a popup modal using DataTables

What is the best way to delete a single asterisk from the content of an HTML <td> element?

Difficulty in accurately retrieving the value in a PHP echo statement using jQuery

Constructing a regular expression

jQuery Toggle and Change Image Src Attribute Issue

A guide on converting nested arrays within a JSON file into a table format in Google Sheets (possibly leveraging Javascript?)