Tukukkk

I have a page that allows a user to drag/drop images into pre-defined DIVs, then I tally up the total value of the images based on their class name. What I am trying to do is get vue to read the values from each outer div.answer and get the class names of the child images.

My source code is:

<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>

This converts to the follow HTML (the nested DIVs and SPANs are user-possible entries by dragging):

    <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>

Currently, I have jQuery/JavaScript calculating the point values using the following:

$(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++;

    }

});

});

I would like Vue to perform similar iteration and addition to return total value of ones and fives found based on the image classname.

Currently, you are approaching this problem as a pure-play DOM operation. If that is what you need then you can simply use $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>

Inside your high-level component, you will have a function like:

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;



}

But this is not the correct Vue way of doing things. You have to think in terms of events and data model (MVVM - don't touch DOM. DOM is just a representation of your data model). Since, you have a drag-n-drop based application, you have to listen for drag, dragstart, dragend and other drag events. For example:

<!-- 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>

Your onDropEnd event handler will look like:

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

    }



}

This is not a complete code as I don't know other components. But it should help you with the required direction.