比较组件的值/BootstrapVue

Posted 2023-02-16

【中文标题】比较组件的值/BootstrapVue

【英文标题】：Compare values over components / BootstrapVue

【发布时间】：2021-11-25 19:13:44

【问题描述】：

我正在与BootstrapVue 合作。我有以下问题 - 我的 parent.vue 中有一个选择下拉列表，我在其中选择我的 ID（你可以看到它是我的道具），我想将它与我的 json 文件进行比较...

现在我需要做以下事情：

使用我的 json 文件检查我选择的 ID（来自 parent.vue）并找到正确的 ID 将所有Articel 放入我的下拉选择中 将所选 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"
                
        
    
]

【参考方案1】：

如果我理解正确，请看下面的 sn-p：

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>

【讨论】：

嘿！非常感谢，主要是效果很好。我唯一的问题是，当我使用此代码行this.rank = (val) 时，它给了我文章而不是我的等级.. 不知道为什么它在你的代码上工作，而不是在我的代码上

是的 - 我有.. :(

我现在明白它是如何工作的 - 但实际上如果我 console.log 这个，输出总是我的 Articel..

嗯，应该可以了，试试用 find 代替过滤器，我更新了答案，请看一下

尝试查找会使我的代码崩溃..所以我得到错误.. - 我尝试为自己寻找解决方案，非常感谢您的帮助和时间！ :)