Как отрендерить vue-компонент на событие?

Question

[microcoder]

Привет!
Не могу разобраться как реализовать следующее. Есть 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? Или быть может это можно решить не эвентами, тогда как?

Answer 1

[0xD34F]

Сделайте копию project.is_enabled, работайте с ней, а по событию project-saved обновляйте оригинал.

Comments

[microcoder]

А как локальную копию "is_enabled" в шаблоне обновить? Дело в том, что в корневом экземпляре vue данные привязаны к HTML input'ам с помощью vue-директивы v-model, но в модальном диалоговом окне на форме есть кнопка "save" на click которой инициируется событие project-saved, чтобы когда диалог закрылся, данные на странице изменились, а не изменялись синхронно когда пользователь только вводит в инпуты данные:

На гифке, когда пользователь отмечает чекбокс, то под окном, на странице находится vue-компонент который сразу меняет состояние (что и понятно), но мне надо, чтобы под окном состояние менялось только когда пройдет успешный REST запрос на сервер при нажатии кнопки Save

[0xD34F]

microcoder, ну так передавайте диалоговому окну копию данных, и обновляйте оригинал только после получения успешного ответа от сервера.

[microcoder]

0xD34F, Мне не понятно как это сделать - "передавайте копию данных". Это как? У меня есть другое решение, более примитивное, но работающее:

1) Экземпляр VUE (привязанный на странице, под диалоговым окном в гифке) с cumpute свойствами, которые ссылаются на данные второго корневого экземпляра VUE простым присвоением переменных средствами языка JS.
2) Экземпляр VUE (привязанный к диалоговому окну) который имеет методы получения данных от сервера. Если данные получены, то в этом экземпляре некая переменная меняется с false на true и тогда в первом экземпляре VUE происходит пересчет, так как в нем объявлено свойство как compute.

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

Можно переделать, так как вы предлагаете и диалоговое окно привязать к копии данных, т.е. как я понял создать vue-компонент диалогового окна и вызывать его примерно так:

<dialog param1="1" param2="2" ...></dialog>

То есть, без директивы v-bind. Но тогда у меня возникает другая проблема, не хочется дублировать код, так как это же диалоговое окно применяется на другой странице, там оно меняет заголовок на "создание проекта", а не изменение как на этой странице. Страницы загружаются с сервера, то есть это не SPA приложение. Вообщем пока какая-то каша в голове с компонетами vue, я с ним знаком только несколько дней, в процессе изучения и понимания.

Пока ясности у меня нет как лучше сделать, а реализация с "говнокодом" у меня работает как описал выше. Ну вообщем спасибо за совет, попробую разобраться как-то.

[0xD34F]

microcoder,

Мне не понятно как это сделать - "передавайте копию данных".

Не очень удачно выразился. Не передавать копию, а копировать при открытии диалога переданные параметры. У вас же есть какой-то обработчик события открытия диалога? Ну вот в нём и копируете параметры. И работаете с этими копиями, вместо самих параметров. А когда надо будет из диалога обновить свойства родительского компонента - посылаете событие, с которым отправляете текущие значения свойств диалога, в которые вы копировали параметры. В родителе подписываетесь на это событие и в его обработчике обновляете свойства родителя присланными значениями.

[microcoder]

0xD34F, Теперь понятно, воспользуюсь этой идеей. Спасибо тебе, что нашел время обсудить мою проблему!