Ранее год проработал на 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 здесь не должно быть.
