Question

我正在使用laravel和vuejs。

我想做的一件事情是，允许用户单击按钮时创建多个地址。

这里是示例代码：

<table>
    <tr>
        <th>POSTAL CODE</th>
        <td><input type="text" name="postal_code[]" v-model="" /></td>
    </tr>   
    <tr>
        <th>City</th>
        <td>
           <select name="city[]" v-model="">
                <option>ABC</option>
           </select>
        </td>
    </tr>   
    <tr>
        <th>District</th>
        <td><input type="text" name="District[]" v-model="" /></td>
    </tr>   
    <tr>
        <th>Street</th>
        <td><input type="text" name="Street[]" v-model="" /></td>
    </tr>   
    <tr>
        <th>Name/th>
        <td>
          last_name<input type="text" name="last_name[]" v-model="" />
          first_name<input type="text" name="first_name[]" v-model="" />
       </td>
    </tr>   
</table>
<button v-on:click="add-form">ADD</button>

编辑抱歉，我的问题不够清楚。我想复制整个表，而不仅仅是一个输入，并且每次用户单击按钮时，我都想显示另一个表（具有旧输入的旧表未更改）

我找到了解决方案。非常感谢！

Answer 1

您需要做的就是创建一个空地址数组，然后在单击按钮时将输入推入该地址数组。这是一个示例：

Jsfiddle： https://jsfiddle.net/zyh4jvuf/

<div id="app">
  <input type="text" v-model="addressInput">
  <button v-on:click="addAddress">add</button>

  <!-- Displaying addresses -->
  <div v-for="address in addresses">
    {{address}}
  </div>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      addressInput: '',
      addresses: []
    }
  },
  methods: {
    addAddress () {
      this.addresses.push(this.addressInput)
      // clear the input
      this.addressInput = ''
    }
  }
})

Answer 2

您要“复制”整个表还是仅复制一个输入？我想第二个要。在那种情况下，我宁愿将信息推送到这样的数组：

<template>
  <div class="formApp">
    <input type="text" name="steet" v-model="street">
    <button @click="addStreet">add</button>
    <div v-for="str in streetArray">
      <div @click="removeStreet($event)">{{ str }}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'formApp',
  data() {
    return {
      streetArray: [],
      street: '',
    }
  },
  methods: {
    addStreet() {
      this.streetArray.push(this.street);
      this.street = '';
    },
    removeStreet(event) {
      var index = this.streetArray.indexOf(event.target.innerText);
      index > -1 ? this.streetArray.splice(index, 1):'';
    }
  }
}
</script>

每次您单击按钮时，addStreet都会添加一条新街道，然后它将清除输入。然后，如果用户要删除街道，则必须单击街道名称。删除内容的方式根本不是用户友好的，因此您可以在每个街道名称上添加一个图标来声明这种可能性。

此外，这只是一个提示，因为在编写街道名称时可能会出错，并且用户需要一种删除它们的方法。一堆输入错误的街道或无法删除您添加的输入将是一团糟。无论如何，你去了。

Answer 3

您可以尝试以下代码

new Vue({
  el: '#example-3',
  data:{
  	title:"Lists",
  	item:{},
  	items:[]

  },
  methods: {
    addform: function () {
      this.items.push(this.item);
      this.item={};
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="example-3">
    
		<table>
		    <tr>
		        <th>POSTAL CODE</th>
		        <td><input type="text" name="postal_code" v-model="item.postal_code" /></td>
		    </tr>   
		    <tr>
		        <th>City</th>
		        <td>
		           <select name="city" v-model="item.city">
		                <option>ABC</option>
		           </select>
		        </td>
		    </tr>   
		    <tr>
		        <th>District</th>
		        <td><input type="text" name="District" v-model="item.District" /></td>
		    </tr>   
		    <tr>
		        <th>Street</th>
		        <td><input type="text" name="Street" v-model="item.Street" /></td>
		    </tr>   
		    <tr>
		        <th>Name</th>
		        <td>
		          last_name<input type="text" name="last_name" v-model="item.last_name" /><br/>
		          first_name<input type="text" name="first_name" v-model="item.first_name" />
		       </td>
		    </tr>   
		</table>
		<button v-on:click="addform">ADD</button>
		 <br/>
		 <h2>{{title}}</h2>
		 <table border="1" v-if="items.length>0">
		 	<tr v-for="(value,index) in items">
		 		<td>{{value.postal_code}}</td>
		 		<td>{{value.city}}</td>
		 		<td>{{value.District}}</td>
		 		<td>{{value.last_name}}</td>
		 		<td>{{value.first_name}}</td>
		 	</tr>
		 </table>
</div>

Vue.js：多次添加相同的表单

3 个答案: