Задать вопрос
@Praud

Как организовать 2way-binding в компонентах vue.js?

Ранее год проработал на angular 1.x и легко организовывал 2way-binding в директивах.
Здесь столкнулся с проблемой.

Вот у меня есть представление:

var controlPanel = new Vue ({
      el: ".control-panel",
      data: {
        showModal: false,
        result: null
      }
});


выше находится компонент

Vue.component("card-dialog", {
      template: "#modal-dialog",
       props: {
        result: {
          twoWay: true
        }
      },
      data: function () {
        return {
            errors: false,
            cardNumber: null,
            exp1: null,
            exp2: null,
            cvv: null
        }
      },
      methods: {
            accept: function() {
                 // Здесь я хочу изменить result. Функция срабатывает на onclick триггере 
                /* this.result = {
                        cardNumber: this.cardNumber,
                        .... 
                    } - не работает. */
           }
      } 
  });


<div class="control-panel">	
	<table>
		<tr>
			<td>
				<button @click="showModal = true">New credit card</button>
			</td>	
			<td>
			        <button>Admin console</button>
			</td>
		</tr>
			</table>
		<div v-show="result !== null">It works</div>
			<card-dialog v-if="showModal" :result="result" @close="showModal = false"></card-dialog>
</div>


Суть в том чтобы меняя result в компоненте у меня она менялась и в "представлении".
<div v-show="result !== null">It works</div>

null здесь не должно быть.
  • Вопрос задан
  • 252 просмотра
Подписаться 2 Оценить 4 комментария
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
@Praud Автор вопроса
Все таки хотелось бы услышать советы от людей, которые реально работали на vue. Отлавливание ивентов не есть good practice. Может есть другие варианты?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы