Привет!
Не могу разобраться как реализовать следующее. Есть vue-component, например такой:
Vue.component('project-status', {
props: ['status'], //{status: Boolean}, // Входные параметры vue-компонента
template: `
<div class="row">
<div class="col-6">Status:</div>
<div class="col-6">
<span class="badge"
v-bind:class="{ 'badge-success': status, 'badge-danger': status == false }"
v-text="status ? 'Enabled' : 'Disabled'">
</span>
</div>
</div>
`
});
Далее, есть некий корневой vue в котором где-то в коде порождается событие "project-saved":
var vue_project = new Vue({
data: {
window_title: '',
project: {
id: null,
dt_from: null,
name: '',
description: '',
is_enabled: false,
},
},
....
this.$emit('project-saved');
....
});
Если использовать компонет вот так, то переданные параметры в него не связываются с корневым vue и остаются локальными переменными:
<project-status status="project.is_enabled"></project-status>
А если вызывать компонент с директивой "v-bind", то тогда происходит непрерывная связь
status с
project.is_enabled:
<project-status v-bind:status="project.is_enabled"></project-status>
Вопрос: Как сделать так, чтобы компонент переотрисовывался в DOMе только на событие
project-saved а не был непрерывно забинден с переменной в корневом vue? Или быть может это можно решить не эвентами, тогда как?
Простой
