Vue中如何在正确输入时完全隐藏Tooltip提示框？——解决点击Save按钮后正确字段显示'false'提示的问题

First, let's break down the root causes of your problem:

• Your tooltip v-if condition was checking the method reference showTooltip!=false instead of the validation result for each specific field. This caused tooltips to render even for valid fields, showing the literal false value as the tooltip text.
• You were using a single tooltipText.show flag without tracking per-field validation states, so all tooltips were considered for rendering if any field was invalid.
• The generic validation method was incorrectly checking all fields for numeric values (including the Name field, which should just be non-empty).
• The tooltips component didn't define props to receive the tooltip text, so it wasn't displaying messages correctly.

Here's how to fix these issues step by step:

Step 1: Add Per-Field Error Tracking #

Add an errors object to your component's data to store validation messages for each field:

data: function() {
  return {
    product: {
      sku: null,
      name: null,
      price: null,
    },
    options: ['DVD', 'Book', 'Furniture'],
    selected: 'DVD',
    tooltipText: {
      onSubmit: 'Please, submit required data',
      onType: 'Please, provide the data of indicated type',
      show: false
    },
    errors: { // New: Track errors per field
      sku: null,
      name: null,
      price: null
    }
  }
},

Step 2: Update Validation Logic #

Replace the generic showTooltip method with a field-specific validation method, and update the submit handler to populate the errors object:

methods:{
  updateValue: function () {
    return this.$emit('sendData')
  },
  submitProduct: function(){
    let hasErrors = false;
    this.errors = { sku: null, name: null, price: null }; // Reset errors
    
    for(let field in this.product){
      const error = this.validateField(field, this.product[field]);
      if(error){
        this.errors[field] = error;
        hasErrors = true;
      }
    }
    
    this.tooltipText.show = hasErrors; // Only show tooltips if there are errors
  },
  showData: function(){
    return JSON.stringify(this.product)
  },
  validateField(field, value){ // Field-specific validation
    if(value == null || value.trim() === ''){
      return this.tooltipText.onSubmit;
    }
    // SKU and Price need to be integers
    if(field === 'sku' || field === 'price'){
      const num = parseInt(value);
      if(isNaN(num) || !Number.isInteger(num)){
        return this.tooltipText.onType;
      }
    }
    // Name only needs to be non-empty
    return null;
  },
  clearError(field){ // Clear error when user types in the field
    this.errors[field] = null;
    // Check if any errors remain
    this.tooltipText.show = Object.values(this.errors).some(err => err !== null);
  },
  created() {
    this.showData()
  }
}

Step 3: Fix the Template #

Update the form template to render tooltips only for fields with errors, and add input listeners to clear errors as the user types:

template: `
<button v-on:click="submitProduct">Save</button>
<h1>Product Add</h1>
<div class="lines">
<label>SKU<input type="text" id="sku" v-model="product.sku" placeholder="ID" @input="clearError('sku')"></label>
<tooltips v-if="tooltipText.show && errors.sku" :tooltip="errors.sku" />

<label>Name<input type="text" id="name" v-model="product.name" placeholder="Please, provide name" @input="clearError('name')"></label>
<tooltips v-if="tooltipText.show && errors.name" :tooltip="errors.name" />

<label>Price<input type="text" id="price" v-model="product.price" placeholder="Please, provide price" @input="clearError('price')"></label>
<tooltips v-if="tooltipText.show && errors.price" :tooltip="errors.price" />
</div>
` ,

Step 4: Fix the Tooltips Component #

Define the required tooltip prop in the tooltips component to properly receive the error message:

productForm.component ('tooltips', {
  props: {
    tooltip: {
      type: String,
      required: true
    }
  },
  template: `
  <div class="tooltip">
  <span class="tooltiptext">{{tooltip}}</span>
  </div>
  `
})

Full Corrected Code #

Here's the complete working code:

var productForm = Vue.createApp ({})
productForm.component('custom-form', {
 props: {
  modelValue: {
   type: String,
   default: ''
  },
 },
 components: ['status-bar', 'tooltips'],
 template: `
<button v-on:click="submitProduct">Save</button>
<h1>Product Add</h1>
<div class="lines">
<label>SKU<input type="text" id="sku" v-model="product.sku" placeholder="ID" @input="clearError('sku')"></label>
<tooltips v-if="tooltipText.show && errors.sku" :tooltip="errors.sku" />

<label>Name<input type="text" id="name" v-model="product.name" placeholder="Please, provide name" @input="clearError('name')"></label>
<tooltips v-if="tooltipText.show && errors.name" :tooltip="errors.name" />

<label>Price<input type="text" id="price" v-model="product.price" placeholder="Please, provide price" @input="clearError('price')"></label>
<tooltips v-if="tooltipText.show && errors.price" :tooltip="errors.price" />
</div>
` ,
 data: function() {
  return {
   product: {
    sku: null,
    name: null,
    price: null,
   },
   options: ['DVD', 'Book', 'Furniture'],
   selected: 'DVD',
   tooltipText: {
    onSubmit: 'Please, submit required data',
    onType: 'Please, provide the data of indicated type',
    show: false
   },
   errors: {
    sku: null,
    name: null,
    price: null
   }
  }
 },
 computed:{
  model:{
   get(){ return this.modelValue },
   set(v){ this.$emit('update:modelValue',v)}
  }
 },
 methods:{
  updateValue: function () {
   return this.$emit('sendData')
  },
  submitProduct: function(){
    let hasErrors = false;
    this.errors = { sku: null, name: null, price: null };
    
    for(let field in this.product){
      const error = this.validateField(field, this.product[field]);
      if(error){
        this.errors[field] = error;
        hasErrors = true;
      }
    }
    
    this.tooltipText.show = hasErrors;
  },
  showData: function(){
   return JSON.stringify(this.product)
  },
  validateField(field, value){
    if(value == null || value.trim() === ''){
      return this.tooltipText.onSubmit;
    }
    if(field === 'sku' || field === 'price'){
      const num = parseInt(value);
      if(isNaN(num) || !Number.isInteger(num)){
        return this.tooltipText.onType;
      }
    }
    return null;
  },
  clearError(field){
    this.errors[field] = null;
    this.tooltipText.show = Object.values(this.errors).some(err => err !== null);
  },
  created() {
   this.showData()
  }
 }
})
productForm.component ('tooltips', {
  props: {
    tooltip: {
      type: String,
      required: true
    }
  },
  template: `
  <div class="tooltip">
  <span class="tooltiptext">{{tooltip}}</span>
  </div>
  `
})
const vm = productForm.mount('#product_form')

Key Improvements #

• Tooltips now only appear for fields that are invalid after clicking Save.
• Fixing a field (typing in it) immediately hides its tooltip.
• No more 'false' tooltip messages, since we only render tooltips when there's a valid error message.
• Validation is now field-specific (Name doesn't need to be a number).

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