比较组件/BootstrapVue 的值

Question

我正在与 BootstrapVue 合作。我有以下问题 - 我的 parent.vue 中有一个 select 下拉列表，其中我 select 我的 ID（如你所见，这是我的道具），我想将其与我的 json 文件...

现在我需要做以下事情：

用我的 json 文件检查我的 selected ID（来自 parent.vue）并找到正确的 ID
将所有 Articel 放入我的下拉列表 selection
将selected Articel 的Rank 发送回父

我不知道如何用嵌套 JSON 文件解决这个问题。我想我必须使用 v-for 循环。

在此先感谢您的帮助！

我的代码：

<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>

我的嵌套 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"
                }
        }
    }
]

Answer 1

如果我理解正确，请看下面的代码片段：

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>

比较组件/BootstrapVue 的值

Compare values over components / BootstrapVue

javascript

json

vue.js

vuejs2

bootstrap-vue