VueJS 2 - обновить модальный компонент при передаче данных

Question

Я работаю над простым модальным компонентом в VueJS 2. Я запускаю событие из другого компонента, который передает объект myobject, хотя и показанному ниже. строка myobject.name и изображение; доступ и расположен по пути myobject.imagepath не отображаются. Просто быть предельно ясным; обрабатываются теги <h4> и <img>, а не содержимое (от объекта). Я предполагаю, что это связано с тем, что модальный объект отображается до того, как я запускаю событие, так что мой вопрос: как мне его перерисовать, или только визуализировать, как только я передал ему данные?

У меня такое чувство, что это то, что было обесценено .sync, хотя этого больше не существует - и я мог быть в любом случае ошибаюсь.

Если есть лучший способ сделать это, то я все уши.

myobject.vue

<template> 
    <div id="my-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 
     aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
       <div class="modal-body"> 
        <div class="container-fluid"> 
         <div class="row"> 
          <div class="col-md-3 col-sm-4 col-xs-6"> 
           <img id="my-modal-image" class="img-fluid" :src="myobject.imagepath" 
            alt="Logo"></div> 
          <div class="col-md-9 col-sm-8 col-xs-6"> 
           <h4 class="modal-title" v-text="myobject.name"></h4> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 
<script> 
    export default { 
     data() { 
      return { 
       myobject: {} 
      } 
     }, 

     created() { 
      Event.listen('changed', function (object) { 
       this.myobject = object 
      }); 
     } 
    } 
</script> 

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

Answer 1

Есть ли причина не использовать Dynamic Props на вашем компоненте?

Вы можете использовать только один динамический пропеллер, как это

<script> 
    export default { 
     props: ['myobject'] 
    } 
</script> 

Теперь каждое изменение на myobject или в его свойствах будет автоматически отражается на шаблоне