我对Vue和webdev都很陌生。我正在创建一个简单的徒步旅行背包列表，作为一个学校项目。有一个组件"PackItem"，其中包括品牌、型号和重量的输入字段。在后端，我有一个数据库，其中包含一些项目，用户可以从中选择。当选择一个品牌时，型号输入将显示该品牌的型号列表，并且当选择模型时，权重输入被自动填充。

<template>
    <div class="inputRow">

        <h1> Brand: {{ this.brand }}</h1>
        <input
            type="text" 
            list="brands" 
            placeholder="Brand"
            v-model="this.brand"
        />
        <datalist id="brands">
            <option 
                v-for="(suggested_brand, index) in getProductBrands" 
                :key="index" 
                :value="suggested_brand"/>
        </datalist> 

        <input
            type="text" 
            list="models" 
            v-model="this.model"
        />
        <datalist id="models"> -->
            <option 
                v-for="(suggested_model, index) in brandModels" 
                :key="index" 
                :value="suggested_model"/>
         </datalist>

        <input 
            class="product-inputs"
            type="number" 
            name="Weight" 
            placeholder="Weight" 
            v-model="this.getProductWeight"
        @change="this.updateItemOnStore($event.target.value);"/> 
    </div>
</template>

这是组件，数据列表和输入从与vuex对话的计算属性中获取值。

export default defineComponent({
    name: 'PackItem',

    props: {
    },

    data() {
        return {
            model: '',
            brand: '',
            weight: 0,
        }
    },
     
    ...
    ...
    ...

    computed: {
        getProductBrands(){
            return this.$store.getters.productsBrandList 
        },

        getProductWeight(){
            let weight = this.$store.getters.productWeight(this.brand, this.model)
            return weight
        },

        brandModels(){
            if(this.brand === ''){
                return []
            }
            console.debug('Item %d getting models for %s', this.uuid, this.brand)
            let models = this.$store.getters.brandModels(this.brand)
            return models
        },
    },
}

这对于第一个PackItem非常有效，但是当我从父PackItem中派生出第二个PackItem时，新PackItem的型号列表将与第一个PackItem相同，无论选择了不同的品牌。
Image: One item spawned
Image: Two items spawned
如果我将计算属性brandModels（）更改为一个方法，并将从存储区返回的数组保存在本地数据中，然后打印它，我可以看到模型列表看起来应该是这样的，但是这些值没有显示在用户的列表中。
Image: Two items spawned with printouts
我还可以在日志中看到，我得到了所选品牌的正确型号.

Item 0 getting models for Hyperlite Mountain Gear
index.js:209 Hyperlite Mountain Gear models: Windrider 3400,Junction 3400
index.js:221 Got weight 907g for product Hyperlite Mountain Gear Windrider 3400
index.js:64 Creating item 1 in category 0
index.js:199 Brands list: ZPacks,Hyperlite Mountain Gear,The OMM
index.js:225 Did not find weight for product   in database!
index.js:199 Brands list: ZPacks,Hyperlite Mountain Gear,The OMM
PackItem.vue:119 Item 1 getting models for ZPacks
index.js:209 ZPacks models: Arc Blast
index.js:225 Did not find weight for product ZPacks Windrider 3400 in database!

因此，在我看来，我似乎是提取所有正确的数据，并且据我所见，它应该显示在浏览器中，但由于某种原因没有。我不知道这里发生了什么事...

编辑：

正如@yoduh所建议的那样，我已经将整个产品表提取到组件中，并在那里计算值，而不是从vuex中的getter中计算出的可能损坏的值。不幸的是，这并没有修复它。仍然可以在日志中看到brandModels（）创建了正确的模型列表，但数据列表仍然显示错误的模型。

computed: {
    getProductBrands(){
        let brands = []
        this.dbProducts.forEach(product => {
            //var json = JSON.parse(product);
            var brand = product.brand;
            if(!brands.includes(brand)){
                console.debug('Adding brand %s to brands list', brand)
                brands.push(brand)
            }
        } )
        console.log('Brands list: %s', brands)
        return brands
    },

    brandModels(){
        if(this.brand === '') {return }
        let models = []
        this.dbProducts.filter(
            product => product.brand === this.brand)
            .forEach(product => models.push(product.model)
            )
        console.debug('%s models: %s', this.brand, models)
        return models
    },

    getProductWeight(){
        if(this.brand === '' || this.model === ''){ return } 
        let product = this.dbProducts.find(
            product => (
                product.brand === this.brand && product.model == this.model
            ))
        if(product){
            let weight = product.weightGrams
            console.debug('Got weight %dg for product %s %s', weight, this.brand, this.model)
            return weight
        }

        console.debug('Did not find weight for product %s %s in database!', this.brand, this.model)
        return 0
    },

},