如何：v-for和ajax

Question

我在一个页面上有此部分，人们可以在其中添加多个地址。用户输入邮政编码并加上密码，魔术就发生了。到目前为止，一切都很好。 但仅适用于第一个。第二个无效。

让我们看一些代码：

HTML部分：

<div class="row">
                        <div class="form-group col-sm-3">
                            <label for="cepPatrimonio">CEP</label>
                            <input type="text" class="form-control" id="cepPatrimonio" name="imoveis[][cep]"
                                v-model="imovel.cep" @keydown="$event.keyCode === 13 ? $event.preventDefault() : false"
                                v-mask="'#####-###'" @blur="pegaCepPatrimonio">
                        </div>
                        <div class="form-group col-sm-6">
                            <label for="ruaPatrimonio">Rua / Avenida / etc.</label>
                            <input type="text" class="form-control" name="imoveis[][rua]" v-model="imovel.rua">
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="numero">Número</label><a href="#!" @click="addNovoImovel"><i
                                        class="fas fa-plus-circle float-right"></i></a>
                                <input type="text" class="form-control" name="imoveis[][numero]"
                                    v-model="imovel.numero">
                            </div>
                        </div>
                    </div>

循环标记：

<div v-for="(imovel, index) in imoveis">
<div class="row">
                            <div class="form-group col-sm-3">
                                <label for="cepPatrimonio">CEP</label>
                                <input type="text" class="form-control" id="cepPatrimonio" name="imoveis[][cep]"
                                    v-model="imovel.cep"
                                    @keydown="$event.keyCode === 13 ? $event.preventDefault() : false"
                                    v-mask="'#####-###'" @blur="pegaCepPatrimonio">
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="ruaPatrimonio">Rua / Avenida / etc.</label>
                                <input type="text" class="form-control" name="imoveis[][rua]" v-model="imovel.rua">
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="numero">Número</label>
                                    <input type="text" class="form-control" name="imoveis[][numero]"
                                        v-model="imovel.numero">
                                </div>
                            </div>
                        </div>
</div>

Vue方法：

pegaCepPatrimonio() {
                const vm = this
                vm.isLoading = true
                axios.get('cep?c='+this.imovel.cep)
                .then(function (response) {
                    vm.imovel.bairro = response.data.bairro,
                    vm.imovel.complemento = response.data.complemento,
                    vm.imovel.cidade = response.data.localidade,
                    vm.imovel.rua = response.data.logradouro,
                    vm.imovel.UF = response.data.uf,
                    vm.isLoading = false
                });
            }

var vue = new Vue({
  el: '#app',
  data: {
    imovel: {
      cep: '',
      rua: '',
      numero: '',
      complemento: '',
      bairro: '',
      cidade: '',
      UF: '',
    },
    imoveis: []
  },
  methods: {
    pegaCepPatrimonio() {
      const vm = this
      vm.isLoading = true
      axios.get('cep?c=' + this.imovel.cep)
        .then(function(response) {
          vm.imovel.bairro = response.data.bairro,
            vm.imovel.complemento = response.data.complemento,
            vm.imovel.cidade = response.data.localidade,
            vm.imovel.rua = response.data.logradouro,
            vm.imovel.UF = response.data.uf,
            vm.isLoading = false
        });
    },
    addNovoImovel: function() {
      this.imoveis.push(Vue.util.extend({}, this.imovel))
    },
    removeImovel: function(index) {
      Vue.delete(this.imoveis, index);
    },
    removeImoveis() {
      this.outrosImoveis = false
    },
    tenhoImoveis() {
      this.outrosImoveis = true
    },
  }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" htrf="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="card">
    <div class="card-header">
      Tem outros imóveis em seu nome?<i class="fa fa-times float-right" @click="removeImoveis" style="cursor:pointer;"></i>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="form-group col-sm-3">
          <label for="cepPatrimonio">CEP</label>
          <input type="text" class="form-control" id="cepPatrimonio" name="imoveis[][cep]" v-model="imovel.cep" @keydown="$event.keyCode === 13 ? $event.preventDefault() : false" @blur="pegaCepPatrimonio">
        </div>
        <div class="form-group col-sm-6">
          <label for="ruaPatrimonio">Rua / Avenida / etc.</label>
          <input type="text" class="form-control" name="imoveis[][rua]" v-model="imovel.rua">
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            <label for="numero">Número</label><a href="#!" @click="addNovoImovel"><i
                                        class="fas fa-plus-circle float-right"></i></a>
            <input type="text" class="form-control" name="imoveis[][numero]" v-model="imovel.numero">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3">
          <div class="form-group">
            <label for="complementoPatrimonio">Complemento</label>
            <input type="text" class="form-control" id="complementoPatrimonio" name="imoveis[][complemento]" v-model="imovel.complemento">
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            <label for="bairroPatrimonio">Bairro</label>
            <input type="text" class="form-control" id="bairroPatrimonio" name="imoveis[][bairro]" v-model="imovel.bairro">
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            <label for="cidadePatrimonio">Cidade</label>
            <input type="text" class="form-control" id="cidadePatrimonio" name="imoveis[][cidade]" v-model="imovel.cidade">
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            <label for="UFPatrimonio">UF</label>
            <input type="text" class="form-control" id="UFPatrimonio" name="imoveis[][UF]" v-model="imovel.UF">
          </div>
        </div>
      </div>
      <div v-for="(imovel, index) in imoveis">
        <div class="divisor_laranja m-t-10 m-b-20" v-if="patrimonio_nao == false"></div>
        <div class="row">
          <div class="form-group col-sm-3">
            <label for="cepPatrimonio">CEP</label>
            <input type="text" class="form-control" id="cepPatrimonio" name="imoveis[][cep]" v-model="imovel.cep" @keydown="$event.keyCode === 13 ? $event.preventDefault() : false" @blur="pegaCepPatrimonio">
          </div>
          <div class="form-group col-sm-6">
            <label for="ruaPatrimonio">Rua / Avenida / etc.</label>
            <input type="text" class="form-control" name="imoveis[][rua]" v-model="imovel.rua">
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label for="numero">Número</label>
              <input type="text" class="form-control" name="imoveis[][numero]" v-model="imovel.numero">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <div class="form-group">
              <label for="complementoPatrimonio">Complemento</label>
              <input type="text" class="form-control" id="complementoPatrimonio" name="imoveis[][complemento]" v-model="imovel.complemento">
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label for="bairroPatrimonio">Bairro</label>
              <input type="text" class="form-control" id="bairroPatrimonio" name="imoveis[][bairro]" v-model="imovel.bairro">
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label for="cidadePatrimonio">Cidade</label>
              <input type="text" class="form-control" id="cidadePatrimonio" name="imoveis[][cidade]" v-model="imovel.cidade">
            </div>
          </div>
          <div class="col-sm-3">
            <div class="form-group">
              <label for="UFPatrimonio">UF</label><a href="#!" v-on:click.prevent="removeImovel(index)"><i
                                            class="fas fa-trash-alt float-right"></i></a>
              <input type="text" class="form-control" id="UFPatrimonio" name="imoveis[][UF]" v-model="imovel.UF">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

我正在等待的响应是这样的：

"imoveis": [
{
"cep": "38406-392"
},
{
"rua": "Alameda City Campo"
},
{
"numero": "72"
},
{
"complemento": null
},
{
"bairro": "Mansões Aeroporto"
},
{
"cidade": "Uberlândia"
},
{
"UF": "MG"
},
{
"cep": "38406-000"
},
{
"rua": "Rua ddas FLores"
},
{
"numero": "511"
},
{
"complemento": "casa"
},
{
"bairro": "Florense"
},
{
"cidade": "São Paulo"
},
{
"UF": "SP"
}
],

我用代码的一小部分编辑了一个代码片段，以便您可以理解。 如何正确做到这一点？