I'm working with BootstrapVue. I have following problem - I have a select dropdown in my parent.vue where I select my ID (as you can see it's my props) and I want to compare this with my json file...

Now I need to do following:

1. Check my selected ID (from parent.vue) with my json file and find the correct ID
2. Put all Articel in my dropdown selection
3. emit Rank of selected Articel back to parent

I don't have any clue how to solve that with a nested JSON File.. I think I have to use a v-for loop..

Thanks in advance for helping me out!

my code:

<template>
  <b-card>
    <div class="mt-2">CLOTHING ITEM</div>
    <b-form-select type="text"></b-form-select>
  </b-card>
</template> 

<script>
import json from './json/ID.json'

export default {
  name: "customerChoice",
  data() {
    return {
      json: json,
    }
  },

  props: ["ID"]
}
</script>

my nested json:

[
    {
        "ID": "1111",
        "Product": {
            "1": {
                "Articel": "Jeans",
                "Rank": "1"
                },
            "2": {
                "Articel": "T-Shirt",
                "Rank": "2"
            }
        }
    },
    {
        "ID": "2222",
        "Product": {
            "1": {
                "Articel": "Hoodie",
                "Rank": "2"
                },
            "2": {
                "Articel": "Jeans",
                "Rank": ""
            }
        }
    },
    {
        "ID": "3333",
        "Product": {
            "1": {
                "Articel": "Socks",
                "Rank": "1"
                }
        }
    }
]

CodePudding user response：

If I understand you correctly, take a look at following snippet:

Vue.component('Child', {
  template: `
  <b-card>
    <div class="mt-2">CLOTHING ITEM</div>
    <b-form-select type="text" 
      v-model="selected" 
      :options="articles" 
      text-field="Articel"
      value-field="Rank"
      >
    </b-form-select>
  </b-card>
  `,
  data() {
    return {
      json: [
        {ID: "1111", "Product": {"1": {"Rank": "1", "Articel": "Jeans"}, "2": {"Articel": "T-Shirt", "Rank": "2"}}},
        {ID: "2222", "Product": {"1": {"Articel": "Hoodie","Rank": "2"}, "2": {"Articel": "Jeans", "Rank": ""}}},
        {ID: "3333", "Product": {"1": {"Articel": "Socks", "Rank": "1"}}}
      ],
      selected: null,
    }
  },
  props: ["id"],
  computed: {
    articles() {
      const res = []
      const art = this.json.find(j => j.ID === this.id)
      for(let key in art.Product) {
        res.push(art.Product[key])
      }
      return res
    }
  },
  watch: {
    selected() {
      this.$emit('changed', this.selected)
    }
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      parentId: '1111',
      rank: ''
    }
  },
  methods: {
    rankReceived(val) {
      console.log(val)
      this.rank = val
    }
  }
})

<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="demo">
  <h3>{{rank}}</h3>
  <Child :id="parentId" @changed="rankReceived" />
</div>