Как заставить jQuery обрезать и/или заменять текст внутри div только после того, как Vue js построил DOM?

Question

[nastya_zholudeva]

Есть код, написанный на jQuery.

$(document).ready(function(){
        _this = this;
        $.each($('.goodsDetail'), function() {
            if($(this).html().length >= 87) {
                $(this).html($(this).html().slice(0, 87) + ' ...');
            }
        });
    });


    $(document).ready(function(){
        _this = this;
        $.each($('.goodsPrice'), function() {
            console.log($(this).text());
            $(this).html($(this).html().replace(/\.(\d+)/gi, '<sup>$1</sup>'));

        });
    });

После того, как страница загрузилась первый раз, он нормально работает. Но после того, как у меня выбраны чекбоксы, при этом идет новый запрос к API, jQuery код не заменяет и не обрезает текст, как должен. Вместо этого он просто оставляет тот текст, который был до выбора чекбоксов.

Как можно это победить?

P. S. Я знаю, что jQuery и Vue не "дружат" друг с другом. Но как такие вещи сделать только с помощью Vue я не знаю

Comments

[tema_sun]

Но зачем тогда vue, если вы все-равно меняете элементы через jquery?

Answer 1

[0xD34F]

Раз используете Vue - вам тут jQuery не нужен.

В первом случае можно применить фильтры:

<div>{{ someStringValue | limit(10) }}</div>

filters: {
  limit(str, limit) {
    return str.length > limit ? str.slice(0, limit) + '...' : str;
  }
}

Во втором - v-html:

<div v-html="sup(someStringValue)"></div>

methods: {
  sup(val) {
    return val.replace(/\.(\d+)/g, '<sup>$1</sup>');
  }
}

https://jsfiddle.net/5bjt71g2/

Comments

[nastya_zholudeva]

0xD34F , попробовала ваш пример, единственное у меня массив объектов items2: [ {a: 'AAA'}, {b: '9.99'}, {c: '0'} ] и код <p v-html="sup(item.b)"></p> не работает(( Как это можно поправить?

[0xD34F]

nastya_zholudeva, ну разумеется, не работает - ведь свойство b есть только у одного объекта из трёх, в двух других случаях в метод sup передаётся undefined, у которого никакого replace конечно же нет.

Разные имена свойств - так и задумано? И только b должно обрабатываться? Тогда можно передавать пустую строку, если b отсутствует: v-html="sup(item.b || '')". Или можно вообще не выводить элемент, у которого нет b: v-if="'b' in item"

[nastya_zholudeva]

0xD34F, точно:)) Это я туплю. У меня еще одна проблемка возникла.

Я данные получаю с помощью REST API. Данные приходят, это видно из вкладки  Network браузера. однако если я использую метод sup(val)

<div class="price">от<span  v-html="sup(good.min_price)"></span><span class="rub">С</span></div>

. То вообще никакие данные не отображаются, а массив данные видно что пустой. Если не применяю метод, то все данные отображаются

[0xD34F]

nastya_zholudeva, тут мне вам помочь нечем. Могу лишь предположить, что min_price - это не строка, а число, например. У которого тоже нет replace, отчего и возникает ошибка.

А вообще, "данные не отображаются" - разговор несерьёзный. Проверьте, нет ли в консоли ошибок. Посмотрите, что именно (тип значения) лежит в min_price.

[nastya_zholudeva]

0xD34F, Да, ошибка есть "TypeError: val.replace is not a function". Параметр min_price точно строка

[0xD34F]

nastya_zholudeva, а с чего вы взяли, что строка? У строк метод replace есть. А раз он is not a function - значит, min_price всё-таки не строка. Скорее всего (судя по имени свойства) - это число. Попробуйте преобразовывать его в строку при передаче в sup: v-html="sup(good.min_price.toString())" или v-html="sup(good.min_price.toFixed(2))"

[nastya_zholudeva]

0xD34F, Спасибо большое, все заработало))