Question

我有一个名为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>

NB：在小提琴中工作正常，但在构建模式下抛出错误，您也可以通过小提琴看到它。

vue模型对象的vue js数组属性不起作用

0 个答案: