CODEWITHSUNDEEP
vue.js
Emkrypted
Emkrypted

Reputation: 67

I'd like to append inputs in HTML form with VueJs

Hi I want to append inputs to a html form.

My Html code is:

  <div class="form-group">
                                    <a
                                    @click="addInput" class="btn btn-primary text-white btn-icon-split">
                                        <span class="icon text-white-50">
                                            <i class="fas fa-check"></i>
                                        </span>
                                        <span class="text">Add</span>
                                    </a>
                                </div>
                                <div v-for="(input, index) in products, quantities">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <label for="exampleFormControlSelect1">Proveedor</label>
                                                <select class="form-control" id="exampleFormControlSelect1"
                                                v-model="products[index]"
                                                >
                                                    <option :value="null">-Seleccionar-</option>
                                                    <option v-for="supplier_post in supplier_posts" :key="supplier_post.rut" :value="supplier_post.rut">{{ supplier_post.names }}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Cantidad</label>
                                                <input
                                                type="number" 
                                                v-model="quantities[index]"
                                                class="form-control"
                                                placeholder="Ingresa la cantidad"
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>

My VueJs code is:

data: function() {
        return {
            products: [],
            quantities: []
        }
    },
    methods: {
        addInput() {
            this.products.push(this.products.length+1);
            this.quantities.push(this.quantities.length+1);
        }
     }

The problem that I have it is that every time that I push to the add button the inputs take a value 1, 2, 3 and I do not want that I'd like that if I click on add button it just add the inputs with a value nulled as default, how can I do that?

Thanks

Upvotes: 0

Views: 908

Answers (1)

Gustavo IAS
Gustavo IAS

Reputation: 178

I limit myself only to solving the problem, and I eliminate the rest of the code, due to errors due to undefined variables (Supplier_posts ...) not provided in the question.

Errors:

v-model="quantities[index]" // you cannot use v-model directly in quantities while you iterate, if you want to capture the value of some input. Changed:

v-model="input.qty"

this.quantities.push(this.quantities.length+1); // If your goal is to add quantities per input to the list, you need to use an object. The solution:

const newItem = { qty: 0, otherAttibuteforCapture_vModel: null, } this.quantities.push(newItem);

You can run the solution and check the reactivity. I hope it will be useful

<head>
  <title>VueJs Introduction</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
  </script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
  <title>Hello, world!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

</head>

<body>


  <div id="app" style="text-align:center;">
    <h1>{{ message }}</h1>
    <p></p>
    <div>
      <a @click="addInput" class="btn btn-primary text-white btn-icon-split">
        <span class="icon text-white-50">
             <i class="fas fa-check"></i>
         </span>
        <span class="text">Add</span>
      </a>
    </div>
    <div v-for="(input, index) in quantities">
      <div class="row">

        <div class="col-md-4">
          <div class="form-group">
            <label for="exampleInputEmail1">Cantidad</label>
            <input type="number" v-model="input.qty" class="form-control" placeholder="Ingresa la cantidad">
          </div>
        </div>
      </div>
    </div>
    <pre> {{this.quantities}}</pre>
  </div>
  <script type="text/javascript">
    var vue_det = new Vue({
      el: '#app',
      data: {
        message: 'Only fixed question',
        products: [],
        quantities: []
      },
      methods: {
        addInput() {
          const newItem = {
            qty: 0, // Or other type value
            otherAttibuteforCapture_vModel: null,
          }
          this.quantities.push(newItem);
          console.log('this.quantities', this.quantities)
        }
      }
    });
  </script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <!--<script src="script.js"></script>-->
</body>

strong text

Upvotes: 1

Related Questions