Issue with VueJS not functioning properly upon initial interaction or initial trigger

After some trial and error, I was able to successfully create dynamic elements. The main goal of this exercise is to generate dynamic divs based on a specified "count", with the ability to add multiple textboxes inside each div.

If you're curious to see what I've accomplished so far, feel free to check it out here.

One thing to note is that upon the first click, the outcome may not match expectations. However, after clicking for the second time, everything falls into place as intended.

As a newcomer to vue, I suspect there might be something crucial that I'm overlooking. Any insight or guidance would be greatly appreciated.

Here's a snippet of the code I've been working on:

<div id="app">
    <button @click="populate">Populate</button>

        <div v-for="(input, index) in inputs" >
          Id 
          <div v-for="(item, i) in input.items">

            <input type="text" v-model="item.name">
          </div>

          <button v-show="index > 0" @click=input_add(index)>Add</button>
        </div>
    {{inputs}}
  </div>


const app = new Vue({

  el: '#app',

  data: {
    inputs: [],
    counter: 0,
    count: 3
  },

  methods: {
    populate(){
      var x = 1
      while(x <= this.count){
        this.inputs.push(
          {
            id: this.counter + 1, 
            items: []
          }
        )
        this.input_add(x)
        this.counter++
        x++
      }
    },
    input_add(x){
      this.inputs[x].items.push(
        {
         name: null
        }
      )
    }
  }

})

Answer №1

To achieve the desired functionality on the second click from the start, consider changing var x = 1 to var x = 0.

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

Using jQuery AJAX to send data containing symbols

When making an AJAX call, I am including multiple values in the data like this: var postData = "aid="+aid+"&lid="+lid+"&token="+token+"&count="+count+"&license="+license; postData = postData + "&category="+category+"&event_name="+e ...

An issue has occurred: The necessary parameter (Slug) was not included as a string in the getStaticPaths function for the /post/[Slug] route

Hello, I've recently embarked on a tutorial journey to create the ultimate Modern Blog App using React, GraphQL, NextJS, and Tailwind CSS. However, I encountered an error that's giving me some trouble specifically when trying to access a post. He ...

How can you implement a bootstrap navigation bar in a vue.js project?

I have encountered a problem with using html in my vue project. Despite following the documentation, it seems that the html is not working properly. I am unsure if this issue could be related to the import of popper.js. I have checked my code and I believe ...

Issue encountered when attempting to utilize Next-Auth alongside Credentials Provider to authenticate within a pre-existing system

I am currently utilizing the Next-Auth Credentials provider for authentication purposes through our existing API. Following the guidelines provided at https://next-auth.js.org/configuration/callbacks the code snippet used is as follows: callbacks: { ...

The console does not display the JSON data for requests and responses

I have successfully set up a server inside of VSCode, but unfortunately the request and response logs that I usually see in my terminal when running the server with npm start are not appearing. I would really like for them to display in the Debug Terminal ...

Notify App.vue that a Service Worker event is being triggered

In my project built with Vue CLI 3 and the Vue PWA plugin, I want to implement a banner that prompts users to click an in-app “Refresh” link following the instructions provided here in the 'Approach #3' section. The challenge lies in integra ...

Javascript function fails to trigger when clicked

<body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-dark"> <h1 class="title">AppifyLife</h1> </ion-header-bar> <ion-content> <center><div class="card" id="life"><h3>20< ...

What is the process for configuring the injector in my application?

https://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js I am facing an issue with the above link as it defines an external js file that I am not familiar with the injector to angular-1.0.0rc9.js. Due to this, my app is not running in the browser. Here is ...

Leveraging the boolean values of attributes within JSX statements

I have been working on a React.js project where I am trying to incorporate a data-picker plugin that requires a specific style of input-attributes: <input data-enable-time=true /> However, I have encountered an issue where webpack fails to compile t ...

Ensuring accurate data entry through form validation within a table format

I'm working with a textbox that is part of a table column. My goal is to make sure the entire column is not empty when the Ok button is clicked. If you have any suggestions on how I can achieve this, please let me know. var formatTableMandatoryVa ...

What is the accurate way to retrieve the icon path for 'manifest.json'?

Within my manifest.json file, I have the following code: "icons": [ { "src": "/static/img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/static/img/icons/android-chrome-512x512.png", "sizes": "512x512", ...

What could be causing my externally hosted React component to malfunction when being imported via NPM?

After successfully creating a standalone component within my original project, I decided to explore the possibility of releasing it as an NPM module. To kick off this process, I attempted to load the library from another repository using NPM in a new proje ...

React Redux Connect MapState not refreshing when filtering an item from a list

It seems like I may have misunderstood something or made a mistake when trying to subscribe to changes on a specific item within a collection in my store. My component isn't receiving updates unless I directly subscribe to the list. The following cod ...

One way to send image data from the front end to the back end using AJAX

Client-Side JavaScript: var userInfo = { 'username': $('#addUser fieldset input#inputUserName').val(), 'email': $('#addUser fieldset input#inputUserEmail').val(), 'fullname': $('#addUser f ...

Encountering a critical issue with Angular 12: FATAL ERROR - The mark-compacts are not working effectively near the heap limit, leading to an allocation failure due

After upgrading my Angular application from version 8 to 12, I encountered an issue. Previously, when I ran ng serve, the application would start the server without any errors. However, after updating to v12, I started receiving an error when I attempted t ...

Refresh the custom JavaScript dropdown list without having to reload the page

I implemented this code to customize a drop-down list Selector. Is there a way to reset this code without reloading the page, maybe by triggering a function with a button click? <button onclick="reset();">Reset</button> For example, if "Jagu ...

Why does the function yield two distinct outcomes?

I can't figure out why, but when I execute the function (kpis1) by itself, it returns the result (100), however, when I run the function (kpis2) alone, I get the result (97). But when I run both functions together, the results are kpis1=100 and kpis2 ...

Is it possible to execute ng-repeat on-click when ng-show evaluates to true?

I am currently facing an issue with my table that populates using ng-repeat. The table contains 100 rows, and clicking on any row reveals a new table (using ng-show) with more detailed product information. However, the performance of my web app is being af ...

In JavaScript, the "this" keyword points to a different object

Here is a script that needs attention: Bla = function() { this.prop = 123; } Bla.prototype.yay = function() { console.log(this,this.prop); } X = new Bla(); $(document).ready(X.yay); // output: #document undefined --> why? $(document).ready(functio ...

Parsing JSON data into different data types in C#

I am looking for a way to transfer various types of data from JavaScript to C#. Specifically, I want to send a JSON object from the JavaScript side using an AJAX call. Here is an example: AnObject = new Object; AnObject.value = anyValue; $.ajax({ typ ...