свойство массива vue js объекта модели vue не работает - PullRequest
0 голосов
/ 02 июля 2018

У меня есть объект с именем post_put_talent, который является v-моделью, внутри этого объекта у меня есть свойство, которое называется массивом addresses. Объект выглядит следующим образом:

  post_put_talent:{
     addresses:[],
     birthplace:'',
     birthdate:'',
     description:'',
     ....so on......

в чем моя проблема, у меня есть поле ввода, которое передается через другую v-модель carry_address, задача которой состоит в том, чтобы поместить данные внутрь post_put_talent.address, как это,

this.post_put_talent.addresses.push(this.carry_address)

Я пытаюсь выполнить этот процесс на входе через директиву @change, метод - insert_in_adderss_array(), но получаю эту ошибку:

Uncaught TypeError: Cannot read property 'push' of undefined
    at VueComponent.insert_in_adderss_array (talents.vue?70da:532)
    at invoker (C:\xampp\htdocs\talenthut-frontend\node_modules\vue\dist\vue.runtime.esm.js:2023)
    at HTMLInputElement.fn._withTask.fn._withTask (C:\xampp\htdocs\talenthut-frontend\node_modules\vue\dist\vue.runtime.esm.js:1822)

как я могу избавиться от этой ошибки? я делаю что-то не так?

скрипка здесь:

new Vue({
  el: '#app',
  mode: 'production',
  data: {
    msg: 'Hello Vue.js!',
    carry_address: '',
    post_put_talent: {
      addresses: [],
      birthplace: '',
      birthdate: '',
      description: '',
      experience: '',
      expertises: {
        expertise_in: '',
        id: ''
      },
      marital_status: {
        id: 0,
        status: ''
      },
      mobile: '',
      photo: '',
      qualification: '',
      sex: {
        id: 0
      },
      user: {
        email: '',
        first_name: '',
        last_name: '',
        username: ''
      }
    }
  },
  methods: {
    insert_in_adderss_array() {
      this.post_put_talent.addresses.push(this.carry_address);
      
      console.log(this.post_put_talent.addresses)
      // }

    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div id="app">
  <div class="form-group col-md-6">
    <label>Address</label>
  </div>

  <div class="form-group col-md-6">
    <input v-model="carry_address" @change="insert_in_adderss_array" type="text" class="form-control" name="addresses" />
  </div>
</div>
</div>

N.B: отлично работает в скрипте, но выдает ошибку выше в режиме сборки, вы также можете увидеть это через скрипку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...