i have vue js component which i have those two function i want to pass them into my vue component how can i do this

Question

this is my first function which i use to generate colors

<script>
  shadeColor(color, percent) {

    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;  
    G = (G<255)?G:255;  
    B = (B<255)?B:255;  

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
},
</script>

and my second function :

<script>
 function flatten(data,color_var,order) 
{
    data.forEach(function (element)
    {
        order++;
        element.category_order = order;
        if(element.children.length > 0) 
        {

            element.color = shadeColor(color_var,-4);
            flatten(element.children,element.color,0);

        } 
        element.color = shadeColor(color_var,-4);
    });
    return data;
}
</script>

which i want to put this two function inside my vue component and i don't know how to do it and this is my vue js code:

<v-card flat>
    <draggable
    class="draggable"
    tag="div"
    :="dragOptions"
    @input="emitter"
    :move="checkMove"
    :list="list"
    :value="value"
    @update="saveUpdatedOrder"
    >
      <div class="item-group text-right" :key="el.id" v-for="el in realValue"  :style=" 
    {backgroundColor: el.color}" @click="loop">
  <div class="item">{{ el.title }}</div>
  <nested-test class="item-sub" :list="el.children" />
 </div>
    </draggable>
    </v-card>

i am using vue draggable library i want to use them inside this list of elements and children Can anyone help me with this ??

this is my code i want to ` created() { var elements = this.realValue var color_var = '#f9f9f9'; elements.forEach(function(item){ if (item.children.length > 0) { item.color = this.loop(color_var, -5) } }) },` i cant reach to the method and i want recursive function to reach all children — Yazan Haffar, Apr 25 '20 at 06:57

score 0 · Answer 1 · answered Apr 24 '20 at 22:04

0

You can use methods for your functions.

https://v1.vuejs.org/guide/events.html

In your template:

<div id="example">
  <button v-on:click="greet">Greet</button>
</div>

In your script:

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods point to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      alert(event.target.tagName)
    }
  }
})
// you can invoke methods in JavaScript too
vm.greet() // -> 'Hello Vue.js!'

answered Apr 24 '20 at 22:04

JeremyM4n

750
5
10

thank you for your answer but for what i need the event ?? i need to pass two function in my array in the component and thank you – Yazan Haffar Apr 25 '20 at 01:35
and i defined first function in method but i want to include it in the second function and pass it into my array and make recursive function – Yazan Haffar Apr 25 '20 at 01:54
https://jsfiddle.net/bpck9r5m/1/ this an example i want to do the same thing but in my vue js – Yazan Haffar Apr 25 '20 at 02:11
Each function would be it's own method, and you can call one method from within another method. Here's an example o that: https://stackoverflow.com/questions/40707738/vuejs-accessing-a-method-from-another-method – JeremyM4n Apr 25 '20 at 18:46

score 0 · Answer 2 · answered Apr 25 '20 at 22:17

i Found The Answer the Issues Was in (this)

flatten(elements,color){ 

 console.log(elements);

  elements.forEach(function(element)
  {
    console.log(this.shadeColor("fcfcfc", -5))
    if (element.children.length > 0) 
    {
      console.log(element);
      element.color = this.shadeColor(color, -5)
      this.flatten(element.children, element.color)
    }
    element.color = this.shadeColor(color, -5)


  }.bind(this))
  return elements

}

that the answer just i need to bind (this)

i have vue js component which i have those two function i want to pass them into my vue component how can i do this

2 Answers2