Компоненты Tengo unos padre/hijo que se comunican mediante propiedades. Перспектива Ambos los estoy llamando en la misma, la información que necesito mostrar en el componente que recibe la propiedad (компонент hijo) зависит падре del botón que se seleccione en el componente, напоминание pero en este, соло recibe la propiedad vacía.
Падре HTML del componente:
<button
class="btn btn-sm btn-success btn-block"
@click="setDataResident"
data-toggle="modal"
data-target="#personPropertyRelation"
>
Agregar Residente
</button>
<button
class="btn btn-sm btn-success btn-block"
@click="setDataOwner"
data-toggle="modal"
data-target="#personPropertyRelation"
>
Agregar Propietario
</button>
Падре JavaScript del componente:
props: ['property'],
data() {
return {
success:null,
dataRelation: {
'title':null,
'placeholder':null,
'label':null,
'id_inmueble':this.property.id,
'propietario':null,
'residente':null,
},
}
},
methods: {
setDataResident: function() {
this.dataRelation.title='Relacionar Residente';
this.dataRelation.placeholder='Ingrese el id del Residente...';
this.dataRelation.label='Residente';
this.dataRelation.residente=true;
this.dataRelation.propietario=false;
},
setDataOwner: function() {
this.dataRelation.title='Relacionar Propietario';
this.dataRelation.placeholder='Ingrese el id del Propietario...';
this.dataRelation.label='Propietario';
this.dataRelation.propietario=true;
this.dataRelation.residente=false;
},
},
}
Invocación del componente hijo:
<person-property-component :dataRelation="dataRelation"></person-property-component>
В коде, который ты поместил, кажется, не проблема, так что ошибка должна приходить из организации элементов или кода составляющего сына в себе. Не видя всего трудно обнаруживать, где у тебя есть ошибка (именно поэтому обычно требуется минимальный, полный и проверяемый пример ).
, Но, может быть, маленький пример помог тебе находить твою ошибку. Наблюдает следующий snippet (который, как кажется, является главным файлом, за которым ты следуешь). Он наблюдает, как происходят с составляющим сыном свойство misDatos
как параметр (равно как ты делаешь с dataRelation
), и как сын представляет данные, содержавшие в вышеупомянутом объекте ни без какой трудности:
Vue.component('componente-padre', {
template: '#componente-padre-template',
data () {
return {
misDatos: { numero: 0 }
}
},
methods: {
sumar() { this.misDatos.numero++; },
restar() { this.misDatos.numero--; }
}
})
Vue.component('componente-hijo', {
template: '#componente-hijo-template',
props: ['misDatos'],
})
var app = new Vue({
el: '#app'
});
.padre {
border: 1px solid red;
padding: 10px;
}
.hijo {
border: 1px solid blue;
margin-top: 10px;
padding: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script type="text/x-template" id="componente-hijo-template">
<div class="hijo">
<h4>Hijo</h4>
número: {{ misDatos.numero }}
</div>
</script>
<script type="text/x-template" id="componente-padre-template">
<div class="padre">
<h4>Padre</h4>
<button @click="sumar">Suma</button>
<button @click="restar">Resta</button>
<componente-hijo :misDatos="misDatos">
</componente-hijo>
</div>
</script>
<div id="app">
<componente-padre></componente-padre>
</div>
Правда я не нахожу какую-либо ошибку. Он помог бы тому, если у тебя есть какое-то задержание. Другой способ перемещать объект составляющего сына - посредством v-bind="dataRelation"
, сделав это, ты посылаешь каждое из свойств объекта по отдельности и в твоем составляющем сыне ты был бы должен соглашаться посредством имени каждого свойства, примера: props:['title','placeholder','label']
не является неправильным форма, в которой ты посылаешь объект, и у тебя не была бы должна бы быть какая-либо проблема, но он рекомендуемый делать это как пример достигает. Шрифт: https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object