Search⌘ K
AI Features
Home
Courses
Mastering TypeScript

Initializing Input Controls for Proper Label Display

Understand how to initialize input controls within a Vue component using the Material Design Bootstrap library for proper label display. Learn to reference HTML elements with Vue refs and use the mdb.Input class to fix label overlap issues for better user interface clarity.

We'll cover the following...

The ItemView component is responsible for displaying a single shopping cart item with an image of the item as well as an input control for the number of switches in the cart. Each item also has a “DELETE” button, which can be used to remove the item from the cart.

The reference element

We will not show or discuss the full HTML template because it is quite lengthy, but we’ll instead focus on a single element of the template, which is the input element:

HTML
<div
  class="form-outline"
  ref="inputAmount"
  >
  <input
    type="number"
    class="form-control"
    v-model="item.amount"
    />
  <label
    class="form-label"
    >No of switches</label>
</div>

  • Lines 1–4: We have a <div> element with the class of "form-outline" and an attribute named ref, which is set to the value "inputAmount". Vue allows us to generate a reference to a particular HTML element that we may need to access within our code. These references are similar to finding a ...