javascript - 如何在 Vue 中隐藏工具提示框

Question

我的目标是在按下“保存”按钮时在每个不正确或空的输入字段上弹出工具提示框。我设法通过按“保存”按钮来显示工具提示框，但是当我输入正确的文本(数字)时，工具提示框不会隐藏，而是显示“错误”的工具提示。如何在正确输入时完全隐藏工具提示？

完整代码:https://jsfiddle.net/a8bnp6m4/1/

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="this.product.sku" placeholder="ID"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.sku)" />
<label>Name<input type="text" id="name" v-model="this.product.name" placeholder="Please, provide name"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.name)" />
<label>Price<input type="text" id="price" v-model="this.product.price" placeholder="Please, provide price"></label>
<tooltips v-if="this.tooltipText.show && showTooltip!=false" :tooltip="this.showTooltip(this.product.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
      }
    }
  },
  computed:{
    model:{
      get(){ return this.modelValue },
      set(v){ this.$emit('update:modelValue',v)}
    }
  },

  methods:{
    updateValue: function () {
      return this.$emit('sendData')
    },
    submitProduct: function(){
      for(var i in this.product){
        this.showTooltip(this.product[i])
        if(this.product[i]==null){
          this.tooltipText.show = true
          //this.product[i]=null
        }
      }
    },
    showData: function(){
      //console.log(this.product.sku)
      return JSON.stringify(this.product)
    },
    showTooltip: function(v){
      if(v == null){ return this.tooltipText.onSubmit }
      else if(!Number.isInteger(parseInt(v))){ return this.tooltipText.onType }    

      else { return false  }
    },
    created() {

      this.showData()
    }
  }
})

productForm.component ('tooltips', {             
  template: `
<div class="tooltip" :tooltip="tooltip" :showTooltip="showTooltip">
<span class="tooltiptext">{{tooltip}}</span>
</div>
`
})

const vm = productForm.mount('#product_form')

Answer 1

今天，我头脑清醒，用了大约 10 分钟的时间，通过用 this.tooltipText.show && showTooltip(this.product.sku)!=false 替换“v-if”内容解决了我的问题自定义工具提示标签。 :)我只是忘了将参数 this.product.sku 添加到 showTooltip 函数。

完整代码:https://jsfiddle.net/amwfcv2o/

<label>SKU<input type="text" id="sku" v-model="this.product.sku" placeholder="ID"></label>
<tooltips v-if="this.tooltipText.show && showTooltip(this.product.sku)!=false" :tooltip="this.showTooltip(this.product.sku)" />

 showTooltip: function(v){
      if(v == null) { return this.tooltipText.onSubmit }
      else if(!Number.isInteger(parseInt(v))) { return this.tooltipText.onType }    
      else { return false  }
    }
  }
})