"Concealing tooltip boxes in Vue: A step-by-step guide

I am trying to achieve a functionality where a tooltip box appears on each incorrect or empty input field when the 'Save' button is pressed. I have been able to display the tooltip boxes upon clicking the 'Save' button, but the issue arises when I input correct text (numbers) - the tooltip box does not hide and instead shows a 'false' tooltip. How can I completely hide the tooltips for correct inputs?

For full code, you can check it out here.

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>
` ,

// Rest of the code remains similar...

Answer №1

After only 10 minutes of focused effort, I managed to solve my issue by updating the content within the 'v-if' statement to

this.tooltipText.show && showTooltip(this.product.sku)!=false
in my custom tooltip tag. It turns out, I had forgotten to include an argument this.product.sku in the showTooltip function.

If you want to see the full code, check it out here: 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  }
    }
  }
})

Answer №2

It seems like the problem lies in this.tooltipText.show && showTooltip!=false". Have you considered modifying it to this.tooltipText.show && showTooltip"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to determine which .js script is modifying a particular HTML element?

Let's take a look at a specific website as an example: This particular website calculates value using a .js script embedded in the HTML itself. Upon inspecting the source code by pressing F12, we can locate the element containing the calculated valu ...

Enable users to upload and run JavaScript code on the server

Currently, I am diving into the world of javascript/nodeJS with the goal of creating an ERP solution. My aim is to give ERP end-users the ability to upload their own customized scripts which can then interact with existing ERP scripts. It goes without sayi ...

Why isn't my watch function functioning properly within Vue?

In my JS file, I have two components. The file starts with this line: const EventBus = new Vue(); I am trying to pass two strings, 'username' and 'password', from the first component to the second component, but it's not working. ...

Utilizing NestJS to pass multiple IDs as parameters in an API

I am working with nestjs for the first time and I've been tasked with creating an API at http://localhost:8000/companies/4/5/8…. Does anyone know how to create this API using the GET(':id') method that can handle multiple parameters? ...

Is there a way to display my current connected clients to a new client using socket.io?

I am currently working on a project involving socket.io. Upon connecting to a new socket, my input username is displayed in the "usersDiv" where all clients are supposed to be listed. However, I've noticed that when I open another tab and input my nam ...

Enhance Your HTML Skills: Amplifying Table Display with Images

Recently, I utilized HTML to design a table. The Table Facts : In the first row, I included an appealing image. The second row contains several pieces of content. In continuation, I added a third row. The contents in this row are extensive, resulting i ...

Storing chrome identity api responses in a Vue.js component can be achieved by creating a function

When passing the response from the Chrome Identity API to the tab running my Vue-powered Chrome extension, I encountered an issue in storing this information inside my Vue instance for use within a component. Despite trying to assign the info to a variable ...

Combine two arrays in PHP similar to how arrays are pushed together in JavaScript using the `array_merge()` function

I am trying to combine two arrays in PHP: Array1 = [123,456,789]; Array2 = [1,2,3]; The desired combination should look like this: Array3 = [[123,1],[456,2],[789,3]]; In Javascript, I can achieve this using the push() function within a for loop: Arra ...

The process of extracting data from a form and storing it as global variables

Consider the following example: This is our HTML form <form action="test1" method="GET" name="frm"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <i ...

Leveraging configuration files in AngularJS

I'm working on an Angular application that communicates with a Node.js backend Express application. I am using a config file to store environment variables for my Node app. Here's how I access the config file in my Node app: index.js var port = ...

Add a JSON file containing an image path as a value into a CSS background property

I currently have a MongoDB database containing documents with 'img' values structured as follows: "img": "../folder/img.jpg" Would it be feasible to utilize this string in my CSS for modifying the background image? This is essential because I n ...

Exclusive to Safari: Codesandbox is experiencing difficulties retrieving data from the localhost server

Would you mind helping me out with this technical issue I'm facing? For the server/API, I am using this link. As for the mock website, it can be found at this URL. The problem is that, in my code, I'm using axios to fetch data from the locally h ...

What could be the reason why the toggleClass function is not being run

I've been running into a little issue with using the .toggleClass function in my code. It seems to work inconsistently, and despite reading various posts on the topic, I haven't found a solution that works for me. Could you provide some assistan ...

Synchronize data bidirectionally between parent and child components in Vue 2

This special wrapper I created for the Vue-multiselect package acts as a child component within this scenario. <template> <div> <multiselect v-model="items" :options="filteredList" ...

Encoding a two-dimensional array into JSON format

In my PHP script, I am querying a database and formatting the results as JSON: $query = mysql_query($sql); $rows = mysql_num_rows($query); $data['course_num']=$rows; $data['course_data'] = array(); while ($fetch = mysql_fetch_assoc($q ...

Identifying Errors in Meteor's Data Publications

I am currently working on a web application using Meteor and AngularJS 2. Take a look at the publication function below: Meteor.publish('abc', function () { // For throwing the meteor error according to the condition if(!this.userId) throw new ...

What is the best way to send the $_SESSION['var'] array to jquery and initiate an ajax request?

I'm dealing with an issue here. I need to retrieve all the items within the $_SESSION['cart'] array and pass it to jQuery so that it can be used in a php-ajax file. My question is, how can this be accomplished? This is what I have in mind: ...

Issue with rendering Html Element on FireFox compared to Chrome

Having some trouble with an individual component (a simple dropzone) while testing on Firefox. It seems to work fine on Chrome, and the CSS looks good. Css .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); wi ...

Utilizing a jQuery click event to modify the placement of a table

I have a request regarding the tables within the #middlebox. I would like to be able to rearrange the table positions by clicking on the list items. For instance, if the current order of the tables is starter -> soup -> seafood, clicking on the #seaf ...

ensure that mocha does not consistently skip tests

When working with mocha, I include several unit tests that incorporate the skip it.skip('login (return photo)', function(done) { ... At times, I need to prevent skipping certain tests, such as right before a deployment. Is there a specific flag ...