Compare values over components / BootstrapVue

Question

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:

Check my selected ID (from parent.vue) with my json file and find the correct ID
Put all Articel in my dropdown selection
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"
                }
        }
    }
]

Nikola Pavicevic · Accepted Answer · 2021-10-06 07:49:26Z

1

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>

edited Oct 6, 2021 at 7:49

answered Oct 5, 2021 at 14:43

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

5 Comments

B0BBY Over a year ago

hey! thank you very much, mostly it works very well. The only problem I have is that when I use this code line this.rank = (val) it gives me the articel not my rank.. don't know why it is working on your code, but not on mine

B0BBY Over a year ago

Yes - I have.. :(

B0BBY Over a year ago

I understand how it works now - but actually if I console.log this, the output is always my Articel..

Nikola Pavicevic Over a year ago

Hmm, it should work, try with find instead filter, I updated answer , take a look pls

B0BBY Over a year ago

trying find makes my code crash.. so I get errors.. - I try to find a solution for myself, thank You very much for your help and time!! :)

Collectives™ on Stack Overflow

Compare values over components / BootstrapVue

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related