Вопросы Теги

Vue propiedades dinámicas mediante botones

Компоненты 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>
0
задан 20.12.2019, 00:09
2 ответа

В коде, который ты поместил, кажется, не проблема, так что ошибка должна приходить из организации элементов или кода составляющего сына в себе. Не видя всего трудно обнаруживать, где у тебя есть ошибка (именно поэтому обычно требуется минимальный, полный и проверяемый пример ).

, Но, может быть, маленький пример помог тебе находить твою ошибку. Наблюдает следующий 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>
1
ответ дан 21.12.2019, 12:13

Правда я не нахожу какую-либо ошибку. Он помог бы тому, если у тебя есть какое-то задержание. Другой способ перемещать объект составляющего сына - посредством v-bind="dataRelation", сделав это, ты посылаешь каждое из свойств объекта по отдельности и в твоем составляющем сыне ты был бы должен соглашаться посредством имени каждого свойства, примера: props:['title','placeholder','label']

не является неправильным форма, в которой ты посылаешь объект, и у тебя не была бы должна бы быть какая-либо проблема, но он рекомендуемый делать это как пример достигает. Шрифт: https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

0
ответ дан 21.12.2019, 12:13