Display computed results in child component in VueJS

user13928344 0
Viewed 34

I pull data in from an Axios request. I have approx 500 records each with several results. I have simplified it for ease.

I display the data on the main component as a drop-down menu and it displays one entry for 'John' and one for 'Jane'. It splits the JSON data and removes duplicates and this works fine.

What Im stuck with is how to display the same data in the child component. At the moment it just displays 'Jane,Jane,Jane,John,John,John,Jane,'.

Do I have to do another methods in the child component for this? I can pass in a prop with uniquenames but it just displays them all in each result.

Any help would be most appreciated.

JSON

"results": [
  "result": {
    "name": "Jane,Jane,John,John,John,John,Jane,Jane,"
  }
  "result": {
    "name": "Jane,Jane,Jane,John,John,John,Jane,"
  }
  "result": {
    "name": "John,Jane,"
  }
  "result": {
    "name": "Jane"
  }
]

Main component

<Result
  v-for="result in Results"
  :result="result"
  :key="result.docNum"
/>

<ul v-for="name in uniquenames" :key="name">
  <li>
  <label class="pr-2" for="name">{{ name }}</label>
  <input                           
    type="checkbox"
    v-model="names"
    :value="name"                             
  />
  </li>
</ul>

methods: {
  const metanames = this.Results
    .filter((result) => results.result && results.result.name)
    .map((item) => item.name)
    .filter((names, i, arr) => arr.indexOf(names) === i)
          
  let names = []
  metanames.forEach((item) => {
    const splitArr = item.split(', ')
    names = names.concat(splitArr)
  })

  this.uniquenames = names.filter(
    (names, i, arr) => arr.indexOf(names) === i,
  )
}

Child component

<template>
  <div>                
    {{ name }}
  </div> 
</template>

<script>
export default {
  name: "result", 
    
  props: {
    result: Object,     
  },
      
  data: function () {
    return {       
      name: this.results.result.name
    }
  }
vue.js
1 Answers

Your <Result> component in the Parent template is passing in the items of Result in a loop, but you have not modified Result, hence why the original non-unique array of names is passed in. Create and pass down a computed property instead which should be a modified version of Result in the format you want. A computed property can update/reformat automatically whenever its dependencies (the original Result) changes. Whenever the computed property updates so will the prop

<Result
  v-for="result in modifiedResults"
  :result="result"
  :key="result.docNum"
/>

computed: {
    modifiedResults() {
      // unfinished code for returning modified Results containing array of unique names
      return [...this.Results].map(r => {
        let uniquenames = getUniqueNames(r.names)
        return { ...r, names: uniquenames }
      })
    },
  },

as the comment says you'll need to finish/change the computed property to return exactly what you want. I can't do it as I'm not completely sure how all the different arrays and object properties in your code fit together, but computed property is definitely the way to go!

yoduh0
Related