How to Retrieve Information from an Array in VueJS

Question

How to Retrieve Information from an Array in VueJS

At the moment, the data being displayed on my page is an array, as shown in the snippet below: https://i.stack.imgur.com/zAvrc.png

However, I only want to retrieve or display the project names.

This is all I have at the moment:

fetch(context,id){
        if(context.getters['isEmpty']){
            Vue.api.mediasetting.index()
                .then(response=>{
                    var medias = response.data[key];

                    context.commit('setMedias',medias);
                    // console.log("init medias", medias[0].project_name)
                },response=>{

                });
        }
    },

Is it possible for me to apply a filter here and if so, how? Thank you.

javascript arrays vue.js

Answer 1

Answer №1

To render the values of project_name in an HTML element, you can utilize a v-for directive like this:

<template>
  <ul id="example">
    <li v-for="(media) in medias">
      {{ media.project_name }}
    </li>
  </ul>
</template>

To access the medias data from your store, you can use a computed property as shown below:

<script>
export default {
  computed: {
    medias: function () {
      return this.$store.medias
    }
  }
}
</script>

This example assumes you are following the structure of single file components.

Answer 2

To render the values of project_name in an HTML element, you can utilize a v-for directive like this:

<template>
  <ul id="example">
    <li v-for="(media) in medias">
      {{ media.project_name }}
    </li>
  </ul>
</template>

To access the medias data from your store, you can use a computed property as shown below:

<script>
export default {
  computed: {
    medias: function () {
      return this.$store.medias
    }
  }
}
</script>

This example assumes you are following the structure of single file components.

How to Retrieve Information from an Array in VueJS

Answer №1

Similar questions

Javascript enables the magnetization of cursor movements

Ways to enable file/result downloads on a website using HTML

CSS Element Overlapping Issue in Safari Browser

What is the process for storing a particular model in a designated collection within MongoDB's database?

Utilize CSS to showcase the full-size version of a clicked thumbnail

What could be causing my JavaScript function to produce repeated letters with just one key press?

A guide on exporting the data type of a computed property in Vue3

Is it possible to utilize Dictionaries (key, value) collections with JQuery?

Creating a dynamic d3 force layout with interactive features in an Angular environment

Surfing the web with Internet Explorer means music downloads rather than streaming

Issues with retrieving a result object from a MySQL query in NodeJS

Leveraging personalized AngularJS directives in conjunction with ExpressJS routing

An error is being thrown by SetState when included within componentDidmount

Upon attempting to open Google Maps for the second time, an error message pops up indicating that the Google Maps JavaScript API has been included multiple times on this page

Button click event not triggering JavaScript execution

Using PHP as a data source, implement a feature in Google Maps that

Obtain all the selection choices in a dropdown list using Selenium

Utilize Laravel in conjunction with AngularJs by implementing a base path in place of the current one when using ng-src

I would greatly appreciate your assistance in deciphering the JavaScript code provided in the book "Ajax in Action"

What is the process for importing a Vue component into Vue and dynamically replacing a value within it?