父数据更改后,Vue组件数据属性不会更新

时间:2017-11-09 15:50:20

标签: vue.js

我有一个带有名为motor的道具的vue组件(卡片马达):

    <div v-for="chunk in chunkDataMotores" class="row">
      <div v-for="motor in chunk" class="col-md-6">
          <card-motor :motor="motor"></card-motor>
      </div>
    </div>

每当父项上的数据(电机)发生变化时,组件的数据属性(id_color,id_motor,nombre _motor等)的更改都不会更新。这里是卡片 - 电机组件:

<template>
<div class="card" :data-motor-id="id_motor">
    <div class="card-header" :style="backgroundColor">
        <h4 class="text-center">{{nombre_motor}}<button class="btn btn-dark btn-sm pull-right" :data-motor-id="id_motor" @click="show_modal_colores(id_motor)">Color motor</button></h4>
    </div>
    <div class="card-body">

        <div class="card">
            <div class="card-header" role="tab" id="headingOne">
                <div class="mb-0">
                    <a data-toggle="collapse" :href="computedId">
                        Piezas asociadas {{nombre_motor}}  <i class="fa fa-caret-down" aria-hidden="true"></i>
                    </a>
                    <button @click="addPieza(id_motor)" class="btn pull-right" title="Añadir pieza nueva al motor"><i class="fa fa-plus text-info" aria-hidden="true"></i></button>
                </div>
            </div>

            <div :id="id_motor" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item" v-for="pieza in piezas_motor">
                            <span class="badge badge-secondary">{{nombre_motor}}</span> {{pieza.pieza}}
                            <button class="btn btn-sm btn-danger pull-right"><i class="fa fa-trash" aria-hidden="true"></i></button>

                        </li>
                    </ul>
                </div>
            </div>
        </div>


    </div>
</div>
</template>

<script>
export default {
    props: ['motor'],
    data: function () {
        return {

            nombre_motor: this.motor.motor,
            id_motor: this.motor.id,
            id_color: this.motor.color.id,
            piezas_motor: this.motor.piezas,
        }
    },
    methods: {
        show_modal_colores: function(id){
            let $engine = $('#engine-colors');
            $engine.data('motor-id', id);
            $engine.find('div.color').removeClass('active');
            $engine.find('div[data-id="'+this.activeColor+'"]').addClass('active');
            $engine.modal('show');
        },
        addPieza(id) {
            let $form = $('#form-pieza');
            $form.data('motor-id', id);
            $form.modal('show');
        }
    },
    computed: {
        computedId: function () {
            return '#'+ this.id_motor;
        },
        backgroundColor: function () {
            return 'background-color: '+ this.motor.color.codigo;
        },
        activeColor: function () {
            return this.motor.color.id;
        }
    },
}

这里是父代码(根组件):

Vue.component('card-motor', require('./components/CardMotor.vue'));

var app = new Vue ({
    el: '#app',
    data: {
        dataMotores: [],
        dataPuestos: [],
        background_style: {
            'background-color': ''
        }
    },
    methods: {
        makeActiveColor: function(e) {
            $(e.currentTarget).closest('.modal-body').find('div.color').removeClass('active');
            $(e.currentTarget).closest('div.color').addClass('active');
        },
        changeColor: function(e) {
            let vm = this;
            let id=$(e.currentTarget).closest('div.modal-content').find('.active').data('id');
            let motor_id = $(e.currentTarget).closest('#engine-colors').data('motor-id');
            axios.post('/admin/motores/change-color', {idmotor:motor_id, idcolor: id})
                .then(response=>{
                    this.getData();
                    $('#engine-colors').modal('hide');

            });
    },
    getData: function(){
        axios.get('/admin/motores/api/data')
            .then(response => {
                this.dataMotores = response.data.motores;
                this.dataPuestos = response.data.puestos;
            })
            .catch();
    }
},

computed: {
  chunkDataMotores() {
        return _.chunk(this.dataMotores, 2);
    }
},

created: function() {
    this.getData();

    }
});

从axios调用返回到服务器的数据是对象数组(getData方法)。计算属性在组件上正确更新,但不在数据属性上更新。

2 个答案:

答案 0 :(得分:0)

您需要在组件中传递dataMotores的值

      <card-motor :motor="dataMotores"></card-motor>

答案 1 :(得分:0)

你正在复制你的道具,所以组件渲染,你的副本在data()中,但data()被调用一次,所以当父组件更新时,孩子不会更新。

data: function () {
    return {
        nombre_motor: this.motor.motor,
        id_motor: this.motor.id,
        id_color: this.motor.color.id,
        piezas_motor: this.motor.piezas,
    }
},

您可以直接使用马达道具,例如:

<div class="card-header" :style="backgroundColor">
  <h4 class="text-center">
    {{ motor.motor }}
    <button class="btn btn-dark btn-sm pull-right"
      :data-motor-id="motor.id" 
      @click="show_modal_colores(motor.id)">
      Color motor
    </button>
  </h4>
</div>