CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Luddeb123
Luddeb123

Reputation: 57

how do i acces the key and data of the array and show it?

I want to display the name of the product and use the name of the array to display my product. i have decent dataset and dont want to remake it.

I want to use this tag inside a router-link

{{ productName }}
{{ productID }}

this is how my vue devtools is showing:


products: Array[2]

    0: Object
        1337: Object
            changed: "2019-08-29 13:36:18"
            name: Product1
    1: Object
        2222: Object
            changed: "2019-08-29 13:45:48"
            name: Product2

I have a computed property but in only displays "0" or "1" the object that has the object i want the name of.

  computed: {
    productName(){
      return Object.keys(this.products)[0];
    }
  }

I want my routerlink to link to 1337 or 2222 if i click the link. But i want to display the name so Product1 or Product2

Upvotes: 0

Views: 41

Answers (1)

David Weldon
David Weldon

Reputation: 64312

Here's a working example that uses a computed property to reformat the products array:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      products: [{
        1337: {
          name: 'Product1'
        }
      }, {
        2222: {
          name: 'Product2'
        }
      }],
    };
  },
  computed: {
    simpleProducts() {
      return this.products.map(p => ({
        id: Object.keys(p)[0],
        name: Object.values(p)[0].name,
      }));
    },
  },
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app" class="container">
  <ul>
    <li v-for="product in simpleProducts" :key="product.id">
      <span>{{ product.id }}</span>
      <span>{{ product.name }}</span>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions