vue.js - Problem with styling validation elements on the page

Question

Could anyone advise how I can style elements so that the p fields were below input fields? I tried to do so but unfortunatelly I do not know how to do it correctly.

The code:

 <template>
  <form @submit.prevent class="row justify-content-center">
    <input
      ref="input"
      type="text"
      class="input-box"
      style="display: block"
      v-model="$store.state.medicineNameInput"
      v-on:keydown.enter.prevent="addMedicine"
      placeholder="Input a medicine"
    />
    <p
      class="validation"
      v-if="getMedicineNameInput === '' || getMedicineNameInput.trim() === ''"
    >
      This field cannot be empty.
    </p>
    <p class="validation" v-else-if="getMedicineNameInput.length < 3">
      You need to input at least three characters.
    </p>
    <input
      ref="input"
      type="date"
      class="input-box"
      v-model="$store.state.medicineExpiryDateInput"
      v-on:keydown.enter.prevent="addMedicine"
      placeholder="Input expiry date"
    />
    <p class="validation" v-if="getMedicineExpiryDateInput === ''">
      Please input a valid date.
    </p>
    <button
      type="submit"
      v-if="
        getMedicineNameInput.length >= 3 &&
        getMedicineExpiryDateInput.length === 10
      "
      @click="addMedicine"
      class="btn btn-warning"
    >
      Add a medicine
    </button>
  </form>
</template>

The elements on the page:

I would be gratefull for advice.

question from:https://stackoverflow.com/questions/65908154/problem-with-styling-validation-elements-on-the-page

Answer 1

Try to wrap every input and paragraph inside a section tag and give it styles -> display : “flex” flex-direction:”column”

It should display the elements below each other