时间戳

首页 > 解决方案 > 我想用 VueJs 以 HTML 形式附加输入

vue.js - 我想用 VueJs 以 HTML 形式附加输入

问题描述

嗨，我想将输入附加到 html 表单。

我的 HTML 代码是：

  <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>

我的 VueJs 代码是：

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

我遇到的问题是，每次我按下添加按钮时，输入的值都是 1、2、3，我不希望我希望如果我点击添加按钮，它只是添加输入默认值为空，我该怎么做？

谢谢

标签： vue.js

解决方案

由于问题中未提供未定义变量（Supplier_posts ...）导致的错误，我将自己仅限于解决问题，并消除了其余代码。

错误：

v-model="quantities[index]" // 如果要捕获某些输入的值，则在迭代时不能直接在数量上使用 v-model。改变：

v-model="输入.数量"

this.quantities.push(this.quantities.length+1); // 如果您的目标是将每个输入的数量添加到列表中，则需要使用一个对象。解决方案：

const newItem = { 数量：0，otherAttibuteforCapture_vModel：null，} this.quantities.push(newItem);

您可以运行解决方案并检查反应性。我希望它会有用

<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/popper.js@1.16.0/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>

强文本

推荐阅读