Question

我正在尝试使字段/按钮彼此独立。就像Adding more people一样。 Example image

无论我添加多少字段，它们都不会相互链接。我可以删除/编辑其中之一，只会影响该字段。

但是我不确定如果需要重复相同的字段，如何实现类似的行为。如果单击Add Other City，将创建一个新的城市街区，但带有先前的数据。 Example image。

HTML：

<div id="app">

  <div v-model="cities" class="city">

    <form action="" v-for="(city, index) in cities">

      <div class="column" v-for="(profile, index) in profiles">
        <input type='text' v-model="profile.name" placeholder="Name">
        <input type='text' v-model="profile.address" placeholder="Address">
        <button type="button" @click="removeProfile">-</button>
      </div>

      <center><button type="button" @click="addProfile">Add More People</button></center>

      <br><br><br>

  </form>
  <center>
    <button type="button" @click="addCity">Add Other City</button>
    <button type="button" @click="removeCity">Remove City</button>
  </center>

  </div>

</div>

JS ：

new Vue({
  el: '#app',
  data: {
    cities: [
        { name: '' }
    ],

    profiles: [
        { name: '', address: '' }
    ],
  },

  methods: {
    addProfile() {
        this.profiles.push({
        name: '',
        address: ''
      })
    },

    removeProfile(index) {
        this.profiles.splice(index, 1);
    },

    addCity() {
        this.cities.push({
        // WHAT TO DO HERE?
      })
    },

    removeCity(index) {
        this.cities.splice(index, 1);
    },
  }
})

这里是Jsfiddle的链接：https://jsfiddle.net/91m8cf5q/4/

我首先尝试在this.profiles.push({'name': '', 'address': ''})的{{1}}内进行this.cities.push({})，但这是不可能的（给出错误）。

我应该怎么做才能将它们分开，以便当我单击添加其他城市时，会出现新的空白字段，并且从该城市中删除字段不应删除先前城市中的字段。

Answer 1

个人资料应该是城市的一部分，例如

new Vue({
  el: '#app',
  data: {
    cities: [{
        name: '',
      profiles: [
            { name: '', address: '' }
        ]}
    ]
   },

  methods: {
    addProfile(city) {
        city.profiles.push({
        name: '',
        address: ''
      })
    },

   addCity() {
    this.cities.push(
    { name: '',
      profiles: [
            { name: '', address: '' }
        ]}
  )
},

    removeCity(index) {
        this.cities.splice(index, 1);
    },
  }
})

HTML：

<div id="app">

  <div class="city">

    <form v-for="city in cities">

      <div class="column" v-for="profile in city.profiles">
        <input type='text' v-model="profile.name" placeholder="Name">
        <input type='text' v-model="profile.address" placeholder="Address">
        <button type="button" @click="removeProfile">-</button>
      </div>

      <center>
        <button type="button" @click="addProfile(city)">Add More People</button>
      </center>

      <br><br><br>

  </form>
  <center>
    <button type="button" @click="addCity">Add Other City</button>
    <button type="button" @click="removeCity">Remove City</button>
  </center>

  </div>

  <div>

Answer 2

您应该将个人资料分配给各个城市

new Vue({
  el: '#app',
  data: {
  	cities: [],
  },
  
  mounted(){
  	this.cities.push({ 
        name: '',
        profiles: [
            { 
              name: '', 
              address: '' }
    		]
    	});
  },
  
  methods: {
  	addProfile(index) {
    	this.cities[index].profiles.push({
      	name: '',
        address: ''
      })
    },
    
    removeProfile(index) {
    	this.profiles.splice(index, 1);
    },
    
   	addCity() {
    	this.cities.push({ 
        name: '',
        profiles: [
            { 
              name: '', 
              address: '' }
    		]
    	})
    },
    
    removeCity(index) {
    	this.cities.splice(index, 1);
    },
  }
})

#app form {
  margin: 5px;
  width: 260px;
  border: 1px solid green;
  padding-top: 20px;
}

.column {
  padding: 5px;
}

.city {
  width: 280px;
  border: 1px solid red;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <div class="city">

    <form action="" v-for="(city, index) in cities">

      <div class="column" v-for="(profile, index) in city.profiles">
        <input type='text' v-model="profile.name" placeholder="Name">
        <input type='text' v-model="profile.address" placeholder="Address">
        <button type="button" @click="removeProfile">-</button>
      </div>

      <center><button type="button" @click="addProfile(index)">Add More People</button></center>

      <br><br><br>

    </form>
    <center>
      <button type="button" @click="addCity">Add Other City</button>
      <button type="button" @click="removeCity">Remove City</button>
    </center>

  </div>

</div>

如何使领域独立？

2 个答案: