Hey there! Let's work through this problem you're having with binding a calculated value to an InputNumber component in Vue 3.

First: Fix Real-Time Updates with :value #

The reason your calculated total doesn't update immediately when you type into the quantity input is that the inline template expression element.qu * element.price isn't being tracked optimally by Vue's reactivity system. Switching to a computed property will fix this, as computed properties automatically react to changes in their dependencies.

Step 1: Create a Computed Property #

In your component's script (using Composition API), define a computed property to handle the total calculation:

import { computed } from 'vue';

// Make sure `element` is a reactive object (created with ref/reactive)
const totalPrice = computed(() => {
  // Add guards to avoid NaN if values are undefined
  return (element.qu || 0) * (element.price || 0);
});

Step 2: Bind the Computed Property to :value #

Update your template to use the computed property instead of the inline expression:

<InputNumber id="integeronly" :value="totalPrice" />

Now, whenever element.qu or element.price changes (like when you type into the quantity input), the computed property will update instantly, and the InputNumber will reflect the new total in real-time.

Second: Using v-model with a Custom Handler (For Editable Totals) #

If you want users to edit the total price input and have that update the quantity (or price) in return, you can't use v-model directly with a computed value (they're read-only by default). Instead, use the underlying model-value prop and update:model-value event that v-model wraps.

Step 1: Update the Template #

<InputNumber 
  id="integeronly" 
  :model-value="totalPrice"
  @update:model-value="handleTotalPriceChange"
/>

Step 2: Write the Handler Function #

Add this function to your script to sync the total input with the quantity (adjust logic if you want to update price instead):

const handleTotalPriceChange = (newTotal) => {
  // Prevent division by zero
  if (element.price === 0) {
    console.warn("Price can't be zero when updating quantity from total");
    return;
  }
  // Calculate and update the quantity based on the new total
  element.qu = newTotal / element.price;
};

Now, editing the total price will automatically update the quantity, and typing into the quantity input will still refresh the total in real-time.

Why Your Original v-model Attempt Failed #

v-model needs a writable reactive property to bind to. Your inline expression element.qu * element.price is a read-only calculated value, not a variable you can assign to—so Vue couldn't update it when the input changed, which is why v-model didn't work directly.

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