How to call specific array values in v-for in Vuejs?

Question

User.vue

<template>
  <div>
    <!-- <div class="cont-color">{{ user.name }} {{ user.age }}</div> -->

    <div v-for="(item, key) in user" :key="key">
      {{ item }}
    </div>
  </div>
</template>

<script>
import { datalisttwo } from "./datalisttwo";
export default {
  name: "User",
  data() {
    return {
      lists: datalisttwo,
    };
  },
  computed: {
    user: function () {
      return this.lists.find((item) => item.cmd_id === this.$route.params.id);
    },
  },
};
</script>

Working code:- https://codesandbox.io/s/hardcore-cartwright-vi6qg?file=/src/components/User.vue

How to call specific value from an array in Vuejs.

At present, It is calling all values, from an array. But want to call only {{name}} and {{age}} values.

If i remove the v-for and write directly like this {{ user.name }} {{ user.age }} --> It is printing the array values, But getting error as

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')" TypeError: Cannot read properties of undefined (reading 'name')

What does call the url query params correctly for both arrays means? Whats is the current issue? — Nitheesh
– Nitheesh, Commented Feb 10, 2022 at 9:36
For my api endpoint url, i need to pass the query params. As stated above. for both arrays — T dhanunjay
– T dhanunjay, Commented Feb 10, 2022 at 9:41
At present issue is,Unable to call the query params dynamically. if i click on router-link, in the left hand side, i am unable to call the exact query params as stated above. and for right hand side, call query params by /id — T dhanunjay
– T dhanunjay, Commented Feb 10, 2022 at 9:46

Mahamudul Hasan · Accepted Answer · 2022-02-10 10:19:53Z

1

I think problem is in your computed block, use below solution

computed: {
    user: function () {
      return this.lists.find((item) => item.cmd_id === this.$route.params.id);
    },
  },

sandbox

answered Feb 10, 2022 at 10:19

Mahamudul Hasan

2,8232 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

T dhanunjay Over a year ago

Thanks, With your solution, i have made few changes. here it is codesandbox.io/s/keen-yonath-50n77?file=/src/components/…

T dhanunjay Over a year ago

If you can see in the url section it is now showing as, HelloWorld?pm_id=1 instead can i make like this, by writing / after HelloWorld. HelloWorld/?pm_id=1 then it gives correct url for me

T dhanunjay Over a year ago

Also for datalisttwo array, can i call query params like.... /id for getting values? please

Mahamudul Hasan Over a year ago

HelloWorld/?pm_id=1 , its not convention,

T dhanunjay Over a year ago

For datalisttwo array. I have API like this 35.162.202.237:3000/somename/id So in frontend i need to show like by making api call, on click of each routerlink. display values

|

Craig Wayne · Accepted Answer · 2022-02-10 10:10:28Z

1

In User.vue you have this comparison:

return this.lists.find((item) => item.id === this.$route.params.id);

but the data you use from datalisttwo.js does not have the property id but instead cmd_id

So that find result will always be undefined which is the error you see in the javascript console:

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')"

so you'll need to update your find to be the following:

return this.lists.find((item) => item.cmd_id === this.$route.params.id);

answered Feb 10, 2022 at 10:10

Craig Wayne

5,1674 gold badges40 silver badges52 bronze badges

3 Comments

T dhanunjay Over a year ago

If you can see in the url section it is now showing as, HelloWorld?pm_id=1 instead can i make like this, by writing / after HelloWorld. HelloWorld/?pm_id=1 then it gives correct url for me. And for datalisttwo array, query params are not calling, like User/id for getting values?

Craig Wayne Over a year ago

just for reference, /?YourQueryParams=SomeValue is the same as ?YourQueryParams=SomeValue they are both valid urls which will have the same effect

T dhanunjay Over a year ago

After making above changes, in the console i am getting some errors like [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')" TypeError: Cannot read properties of undefined (reading 'name') codesandbox.io/s/hardcore-cartwright-vi6qg?file=/src/components/…

thidzz · Accepted Answer · 2022-02-10 13:41:37Z

1

I guess you need to return an Array on that computed property. Use filter instead of find.

 computed: {
    user: function () {
      return this.lists.filter((item) => {
        if(item.cmd_id === this.$route.params.id) {
           return item
        }
      })
    }        
 }

answered Feb 10, 2022 at 13:41

thidzz

3031 gold badge4 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to call specific array values in v-for in Vuejs?

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related