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

Question

我有一个 vue 组件（card-motor），带有一个名为 motor 的道具：

    <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 方法）。计算属性在组件上正确更新，但不是数据属性。

Answer 1

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

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

Answer 2

你正在复制你的道具，所以组件渲染，在 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,
    }
},

你可以直接使用motors prop，比如：

<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>