Vue JS中根据select下拉选项自动填充关联输入框的问题求解

问题核心原因 #

BaseQuantity 组件的展示数值quantity是组件内部私有状态，你当前的逻辑仅在选择规格后把数值存入了Vuex，没有同步修改子组件内部的quantity，所以会出现Vuex里数值正确、但组件界面不展示的问题。

修复步骤 #

1. 改造BaseQuantity组件支持双向绑定

修改BaseQuantity.vue，新增value属性接收父组件传入的数值，同时监听父组件传入值的变化同步更新内部展示：

<template>
    <div class="quantity" :class="disabled ? 'quantity__untoggle' : 'quantity__toggle'">
        <button type="button" @click="decrement" class="btn quantity__decrement" :disabled="disabled">-</button>
        <input type="text" class="quantity__value" :value="quantity" :disabled="disabled" readonly>
        <button type="button" @click="increment" class="btn quantity__increment" :disabled="disabled">+</button>
    </div>
</template>

<script>
export default {
    props : ['disabled', 'value'],
    data(){
        return{
            quantity: this.value ?? 0
        }
    },
    watch:{
        // 监听父组件传值变化，同步更新内部展示数值
        value(newVal) {
            this.quantity = newVal ?? 0
        },
        quantity :function(val){
            this.$emit('input', val);
            this.$emit('updateQuantity',val);
        }
    },
    methods :{
        increment () {this.quantity++},
        decrement () {if(this.quantity === 0) {alert('Negative quantity not allowed')} else {this.quantity--}}
    }
}
</script>

2. 修改父组件Lite.vue的绑定逻辑

• 首先在data中新增三个变量，用于和数量选择器做双向绑定：

data() {
  return {
    // 原有变量保留，新增以下内容
    cpuQty: 0,
    ramQty: 0,
    capacityQty: 0
  }
}

• 修改模板中base-quantity的绑定规则：

<!-- vCPU 数量选择器 -->
<base-quantity @updateQuantity="updateCpuLite" v-model="cpuQty"></base-quantity>

<!-- vRAM 数量选择器 -->
<base-quantity @updateQuantity="updateRamLite" v-model="ramQty"></base-quantity>

<!-- 存储容量 数量选择器 -->
<base-quantity @updateQuantity="updateCapacityLite" v-model="capacityQty"></base-quantity>

• 修改selectedServerFlavorLite的监听逻辑，选择规格时同步更新双向绑定的变量：

watch: {
  selectedServerFlavorLite: function() {
    let serverFlavorLite = this.serverFlavorLite.find(item => item.value == this.selectedServerFlavorLite);
    this.$store.commit('setServerFlavorLite', serverFlavorLite);
    if(this.selectedServerFlavorLite == "flavor-1"){
      // 同步更新绑定变量，触发子组件展示更新
      this.cpuQty = 4
      this.ramQty = 2
      this.capacityQty = 10
      // 原有更新Vuex逻辑保留
      this.updateCpuLite(4);
      this.updateRamLite(2);
      this.updateCapacityLite(10);
    }
    // 其他规格的填充逻辑可以在这里扩展
  },
  // 其他原有watch逻辑保留
}

修改后选择服务器规格时，数量选择器就会同步展示对应的填充数值，后续用户手动修改数量的逻辑也可以正常生效。

内容的提问来源于stack exchange，提问作者frankfurt