Vue.js监听预填充嵌套对象并动态计算选中项sale_price总价

嘿，我来帮你搞定这两个需求——计算选中项的总价，以及在Vue里监听预填充嵌套对象的动态属性～

核心思路是让每个my-item子组件把选中项的价格传递给父组件，父组件收集所有价格后用计算属性算出总和。具体步骤如下：

步骤1：子组件（my-item）中触发选中事件 #

在你的my-item组件里，当下拉框选项变化时，找到对应的sale_price并通知父组件：

<template>
  <div>
    <!-- 下拉框绑定选中的item ID -->
    <select v-model="selectedItemId">
      <option v-for="option in itemdata" :key="option.id" :value="option.id">
        {{ option.name }}
      </option>
    </select>
    <!-- 两个输入框，从选中项获取对应数据 -->
    <input type="text" :value="selectedItem?.name" readonly />
    <input type="number" :value="selectedItem?.sale_price" readonly />
    <button @click="$emit('remove')">移除</button>
  </div>
</template>

<script>
export default {
  props: ['itemdata', 'item'],
  data() {
    return {
      // 用父组件传递的item初始化选中ID
      selectedItemId: this.item.selectedId || ''
    }
  },
  computed: {
    selectedItem() {
      // 根据选中ID匹配对应的item数据
      return this.itemdata.find(item => item.id === this.selectedItemId) || {}
    }
  },
  watch: {
    selectedItemId(newId) {
      // 向父组件发送当前行的选中价格
      this.$emit('update-price', {
        index: this.$parent.items.indexOf(this.item),
        price: this.selectedItem.sale_price || 0
      })
      // 更新父组件中对应item的选中状态，方便回显
      this.$emit('update-item', {
        index: this.$parent.items.indexOf(this.item),
        selectedId: newId
      })
    }
  }
}
</script>

步骤2：父组件接收数据并计算总和 #

在父组件里维护每行的选中价格，用计算属性自动求和：

<template>
  <div id="app">
    <div>
      <my-item 
        v-for="(item, index) in items" 
        :key="index"
        :itemdata="itemList" 
        :item="item" 
        @remove="removeItem(index)"
        @update-price="updateItemPrice(index, $event.price)"
        @update-item="updateItem(index, $event.selectedId)"
      >
      </my-item>
      <!-- 实时显示总价格 -->
      <p class="total-price">总价格：{{ totalPrice }}</p>
    </div>
    <div>
      <button @click="addItem">Add Item</button>
    </div>
  </div>
</template>

<script>
import MyItem from './MyItem.vue'

export default {
  components: { MyItem },
  data() {
    return {
      itemList: [
        // 示例itemList结构
        { id: 1, name: '商品A', sale_price: 150 },
        { id: 2, name: '商品B', sale_price: 280 },
        { id: 3, name: '商品C', sale_price: 99 }
      ],
      items: [
        // 初始化行数据，包含选中ID字段
        { selectedId: '' }
      ],
      itemPrices: [] // 存储每行的选中价格
    }
  },
  computed: {
    totalPrice() {
      // 累加所有选中项的价格
      return this.itemPrices.reduce((sum, price) => sum + price, 0)
    }
  },
  methods: {
    addItem() {
      this.items.push({ selectedId: '' })
      this.itemPrices.push(0) // 新增行默认价格为0
    },
    removeItem(index) {
      this.items.splice(index, 1)
      this.itemPrices.splice(index, 1)
    },
    updateItemPrice(index, price) {
      this.itemPrices[index] = price
    },
    updateItem(index, selectedId) {
      this.items[index].selectedId = selectedId
    }
  }
}
</script>

Vue默认无法监听对象新增的属性，但如果是预填充的嵌套对象（初始化时已有完整结构），可以通过以下方式处理：

方式1：深度监听嵌套对象 #

如果你的item是嵌套结构（比如item: { detail: { sale_price: 0 } }），可以开启deep: true监听整个对象的变化：

watch: {
  'item.detail': {
    deep: true,
    handler(newDetail) {
      console.log('嵌套属性更新：', newDetail.sale_price)
      // 这里可以触发价格总和更新等逻辑
    }
  }
}

方式2：用计算属性动态获取嵌套属性 #

如果只是需要动态使用嵌套属性的值，用计算属性会更简洁，还能避免报错：

computed: {
  currentSalePrice() {
    // 可选链操作符处理可能的undefined情况
    return this.item?.detail?.sale_price || 0
  }
}

方式3：确保初始化时嵌套结构完整 #

如果嵌套对象是后续才填充的，一定要在初始化时定义好完整结构，这样Vue才能监听属性变化：

data() {
  return {
    item: {
      detail: {
        sale_price: 0, // 提前定义好需要监听的属性
        name: ''
      }
    }
  }
}

如果后续需要动态添加属性，必须用Vue.set或this.$set：

// 给嵌套对象新增属性并让Vue监听
this.$set(this.item.detail, 'discount', 0.8)

这样不管是预填充还是动态添加的嵌套属性，都能被Vue正确监听和使用啦～

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