Почему не обновлятся директива реактивно?

Question

[Евгений]

В провете есть простая пользовательская директива (которая форматирует вывод цены).
При отрисовки директива отрабатывает, но если свойтсво обновляется реактивно - значение не меняется. Если просто отобразить значение без директивы - всё норм.

// Подключенная директива
app.directive('price', PriceDirective)

// Сам файл с директивой
export default (el, binding) => {
    let _number = binding.value,
        _decimal = (binding?.arg?.decimal) ? binding.arg.decimal : 0,
        _separator = ' ';
    let decimal = (typeof (_decimal) != 'undefined') ? _decimal : "";
    let separator = (typeof (_separator) != 'undefined') ? _separator : ' ';
    let r = parseFloat(_number), rr = 0, b = 0;
    let exp10 = Math.pow(10, decimal);
    r = Math.round(r * exp10) / exp10;
    rr = Number(r).toFixed(decimal).toString().split('.');
    b = rr[0].replace(/(\d{1,3}(?=(\d{3})+(?:\.\d|\b)))/g, "\$1" + separator);
    r = (rr[1] ? b + '.' + rr[1] : b);
    el.replaceWith(r)
}

// В самом шаблоне:
<span v-price="model.price" /> руб.

Answer 1

[Антон Антон]

Вероятно потому что элемента больше нет, есть текст. Надо избегать таких манипуляций с DOM, вся связь дерева с реактивными свойствами может сломаться вплоть до полной потери реактивности из-за ошибки выполнения js.
ИМХО, правильно в данном случае сделать компонент для вывода и render функцию, возвращающую строку (если оно без тега должно быть). Но я бы на тегах не экономил, пусть компонент span выводит.

как-то так: https://play.vuejs.org/#eNp9UsFO3DAQ/RXLlyxilUi0p2... (само форматирование не копировал, ибо оно какое-то бессмысленное, проще с помощью https://developer.mozilla.org/en-US/docs/Web/JavaS... сделать)

Comments

[Евгений]

Благодарю, понял свою ошибку