Got it, let's tweak your computed property to support German number formatting (dots for thousands separators, commas for decimals) while keeping the underlying price value as a valid float. Here's the modified code and breakdown:

Modified Computed Property #

computed: {
  displayValue: {
    get: function get() {
      if (this.isInputActive) {
        // When input is active, show raw float as string with German decimal comma
        return this.price.toString().replace('.', ',');
      } else {
        // Format for display: German style (€ 1.000.000,50)
        return "€ " + this.price.toFixed(2)
          .replace('.', ',') // Swap default decimal point to comma
          .replace(/(\d)(?=(\d{3})+(?:,\d+)?$)/g, "$1."); // Add thousand separators with dots
      }
    },
    set: function set(modifiedValue) {
      // Convert German formatted input back to a standard float
      var cleanedValue = modifiedValue
        .replace(/\./g, '') // Remove all thousand separator dots
        .replace(',', '.'); // Replace decimal comma with a dot for parseFloat
      var newValue = parseFloat(cleanedValue);
      // Fallback to 0 if input isn't a valid number
      this.price = isNaN(newValue) ? 0 : newValue;
    }
  }
}

Key Changes Explained #

• Getter (Display Logic):

  • When the input is active, we convert the float to a string and swap the dot to a comma so users can type in German format naturally.
  • When the input is inactive, we first use toFixed(2) to enforce two decimal places, swap the default decimal dot to a comma, then use a regex to insert dots as thousand separators before groups of three digits (stopping at the decimal comma).

• Setter (Input Parsing Logic):

  • First, we strip out all thousand separator dots from the user's input—these are just for display, not part of the numeric value.
  • Then we replace the decimal comma with a dot, which lets parseFloat correctly interpret the value as a standard float for calculations or backend use.
  • We kept your original fallback to 0 if the cleaned value isn't a valid number to maintain robustness.

This setup lets users interact with numbers in familiar German formatting, while your component still uses a proper float for the underlying price value—ideal for calculations or sending data to a backend.

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