Show the HTML element once the v-for loop has been completed

I am facing an issue with displaying elements using a v-for loop in my object. Here is the code snippet:

    <template v-for="(item, index) in myObject">
      <v-row :key="index">
          <v-col>
            <v-text-field
              v-model="item.value"
              :label="item.name"
            />
          </v-col>
        </v-row>
    </template>
 
    <!-- additional TextField -->
    <v-row>
      <v-col>
        <v-text-field
          v-model="modifyDateTime"
          label="Modify date and time"
        />
      </v-col>
    </v-row>

Though the code works fine, the additional v-text-field I added after the v-for loop appears before the elements rendered by the loop.

Is there a solution to make sure that the last v-text-field element is displayed right after rendering the elements of the v-for loop?

Answer №1

Try using v-if within a loop

<template v-for="(item, index) in myObject">
          <v-row :key="index">
              <v-col>
                <v-text-field
                  v-model="item.value"
                  :label="item.name"
                />
              </v-col>
            </v-row>
            <!-- add a new TextField here -->

                <v-row v-if="index == Object.keys(item).length - 1">
                  <v-col>
                    <v-text-field
                      v-model="modifyDateTime"
                      label="Modify date and time"
                    />
                  </v-col>
                </v-row>
        </template>
 
          

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

Angular2 Filtering Problem

Trying to create a filter in angular2, I have constructed an array of products as shown below: private items = ["Apple", "Banana", "Orange"]; Below is the code for my filter pipe: import {Pipe} from 'angular2/core'; @Pipe({name:'filter&a ...

Is it possible to programmatically refresh an Angular controller?

Within my HTML page, I have implemented three tabs with each tab linked to a unique controller. The structure is as follows: MainHTML (app.pages.managing.html): <div id="DetailsViewContainer"> <div ng-if="selectedTab === 'tab1&a ...

The perplexing configuration of a webpack/ES6 project

I am currently in the process of setting up my very first ES6 and webpack "application" where I aim to utilize classes and modules. However, each time I attempt to transpile the application using the webpack command, I encounter the following error: $ web ...

The TypeScript error "Uncaught ReferenceError: require is not defined" occurs when the

When attempting to export a namespace from one .ts file and import it into another .ts file, I encountered an error: NewMain.ts:2 Uncaught ReferenceError: require is not defined. As someone new to TypeScript, I am still in the learning process. Below is a ...

The method of utilizing React with Redux to display component properties

I am currently trying to include my common component in my main.js file Successfully implemented this However, when attempting to print my Redux data values in the common component, I created a method called handleClickForRedux to handle this task. Even af ...

Node.js: Configuring keep-alive settings in Express.js

How can I properly implement "keep alive" in an express.js web server? I came across a few examples.. Example 1: var express = require('express'); var app = express(); var server = app.listen(5001); server.on('connection', function(s ...

How can I conceal child <div> elements when the parent div is resized?

Struggling to implement a zoom in/out feature on my web app using the jqueryUI slider. Having trouble handling cases where the parent div shrinks too much, causing issues with the child containers. <div class="puck originator inline-block" style="w ...

What steps should be followed to construct a window identical to the one depicted in the attached image using HTML and CSS?

Check out this link to see the window style I'm trying to recreate using HTML, CSS, and Javascript. No Jquery needed. Thank you in advance. ...

Guide to Automatically Refreshing Rows in a Vue.js Table with Live Data Updates

Yes, I can provide the translation for you: Hello, I have a query regarding creating a simple editor resembling Excel, with the functionality to automatically save data in the database when a cell value is modified. Currently, I have to manually click the ...

Encountering 401 unauthorized error in Laravel Passport, Vue.js, and Axios integration

I am fairly new to VueJS and I am trying to retrieve data from a Laravel (passport) API. To do this, I have used npm i axios for making API requests. Below is the script code from my App.vue file: import axios from 'axios'; export default { da ...

Discover the outcome of two asynchronous ajax requests using XHR's onprogress event-handler

My current challenge involves seeking out images within an ajax request response and extracting the src URL for utilization in another ajax request. I am aiming to monitor the loading progress of each image and display the resulting progress in a designat ...

Include a new key and its corresponding value to an already existing key within FormData

I have a form that includes fields for title, name, and description. My goal is to submit the form values using an API. To achieve this, I am utilizing jQuery to add key-value pairs to the FormData variable: formdata.append('description_text', jq ...

Step by step guide to implementing form step validation in a multi-step jQuery form with radio buttons

I have implemented the sample code provided in this link, with the addition of 2 extra form steps: LINK TO SAMPLE FORM My form consists of radio buttons (2 per page) instead of text boxes. How can I ensure that each form page is validated so that the for ...

Unable to locate the namespace for the installed library

Looking for a solution in my ExpressJS setup with Pino logger. I am trying to create a class that can be initialized with a Pino logger. Here is the code snippet: import express, { NextFunction, Request, Response } from 'express'; import pino fr ...

Identifying when two separate browser windows are both open on the same website

Is it possible to detect when a user has my website open in one tab, then opens it in another tab? If so, I want to show a warning on the newly opened tab. Currently, I am implementing a solution where I send a "keep alive" ajax call every second to the s ...

Implement Acrobat JavaScript to enforce a mandatory separate field when a checkbox is selected

As a designer with limited coding skills, I have developed an acrobat form that includes several due date fields. These fields are only mandatory if a specific checkbox is selected. I am looking for the javascript code that will validate the requirement: ...

Creating a customized HTTP class for Bootstrap in Angular 2 RC 5

During my experience with Angular 2 RC 4, I encountered a situation where I needed to create a class called HttpLoading that extended the original Http class of Angular2. I managed to integrate this successfully into my project using the following bootstr ...

Tips for updating ng-repeat when the modal is closed?

Scenario: I've got a page (angular) containing a repeater. <tr ng-repeat="row in results.leads"> <td>{{row.SubmittedByName}}</td> Inside the repeater, there's a button in a column that triggers a modal to modify the data o ...

Issues with Angular Reactive Forms Validation behaving strangely

Working on the login feature for my products-page using Angular 7 has presented some unexpected behavior. I want to show specific validation messages for different errors, such as displaying " must be a valid email " if the input is not a valid email addre ...

Applying a consistent script with varying inputs on the same HTML page

Is it possible to create a JavaScript code that can be used across different sections of an HTML document? The goal is for the script to fetch data such as title, runtime, and plot from a specific URL request and insert this information into the appropriat ...