Динамически подсчитывать дочерние элементы по имени класса в Vue

Question

У меня есть страница, на которой пользователь может перетаскивать изображения в предварительно определенные DIV, а затем подсчитывать общее значение изображений на основе их имени класса.То, что я пытаюсь сделать, это получить vue, чтобы прочитать значения из каждого внешнего div.answer и получить имена классов дочерних изображений.

Мой исходный код:

<div
    is="box-answers"
    v-for="box in boxes.slice().reverse()"
    v-bind:key="box.id"
    v-bind:level="box.level"
    v-bind:hint="box.hint"
></div>

<script>
Vue.component('box-answers', {
    props: ['level','hint'],
    template: '<div class="droppable answer :id="level" :title="hint"></div>'
});

new Vue({ 
    el: '#mainapp',
    data: {
        boxes: [
            { id: 1, level: 'baselevel-1', hint: 'x 1' },
            { id: 2, level: 'baselevel-2', hint: 'x 20' },
            { id: 3, level: 'baselevel-3', hint: 'x 400' },
            { id: 4, level: 'baselevel-4', hint: 'x 8,000' },
            { id: 5, level: 'baselevel-5', hint: 'x 160,000' }
        ]
    }
</script>

Этопреобразует в следующий HTML-код (вложенные DIV и SPAN являются пользовательскими записями путем перетаскивания):

    <div id="baselevel-5" class="droppable answer" title="x 160,000">
      <div><img src="images/line.gif" alt="Five" class="imgfive"></div>
      <span><img src="images/dot.gif" alt="One" class="imgone"></span>
    </div>
    ...
    <div id="baselevel-1" class="droppable answer" title="x 1">
      <span><img src="images/line.gif" alt="One" class="imgone"></span>
    </div>

В настоящее время у меня есть jQuery / JavaScript для вычисления значений точек с использованием следующего:

$(function(j) {
var arAnswers = Array(1);
count = 0; //
j("div.answer").each(function( idx ) {
    currentId = j(this).attr('id');
    ones = 0;
    fives = 0;

    if ( j("#" + currentId).children().length > 0 ) {
        ones = j("#" + currentId).children().find("img.imgone").length * 1;
        fives = j("#" + currentId).children().find("img.imgfive").length * 5;
        arAnswers[count] = ones + fives; //Tally box value

        count++;
    }
});
});

Я бы хотел, чтобы Vue выполнил аналогичную итерацию и сложение, чтобы получить общее значение, найденное из единиц и пятерок, на основе имени класса изображения.

Answer 1

В настоящее время вы подходите к этой проблеме как к чистой операции DOM.Если это то, что вам нужно, тогда вы можете просто использовать $refs:

<!-- NOTICE ref -->
<div ref="boxAnswers"
    is="box-answers"
    v-for="box in boxes.slice().reverse()"
    v-bind:key="box.id"
    v-bind:level="box.level"
    v-bind:hint="box.hint">
</div>

Внутри вашего высокоуровневого компонента у вас будет такая функция:

function calculate() {
    // NOTICE $refs
    const arAnswers = this.$refs.boxAnswers.map((x) => {

        // $el is the DOM element
        const once = x.$el.querySelectorAll('img.imgone').length * 1;
        const fives = x.$el.querySelectorAll('img.imgfive').length * 5;

        return once + fives

    });

    return arAnswers;

}

Но это неправильный способ действий Vue. Вы должны думать с точки зрения событий и модели данных (MVVM - не трогайте DOM. DOM - это просто представление вашей модели данных).Так как у вас есть приложение на основе перетаскивания, вы должны прослушивать drag, dragstart, dragend и другие drag события.Например:

<!-- NOTICE drop event -->
<div @drop="onDropEnd(box, $event)"
    is="box-answers"
    v-for="box in boxes.slice().reverse()"
    v-bind:key="box.id"
    v-bind:level="box.level"
    v-bind:hint="box.hint">
</div>

Ваш обработчик событий onDropEnd будет выглядеть следующим образом:

function onDrop(box, $event) {

    // box - on which box drop is happening
    // $event.data - which image is being dropped

    // Verify $event.data is actually the image you are intending
    if ($event.data === 'some-type-image') {
        // Do the counting manipulations here
        // ... remaining code
    }

}

Это не полный код, поскольку я не знаю других компонентов.Но это должно помочь вам в нужном направлении.