Calling a function dynamically in Vue Js for loop

Question

I have a json which I have kept inside my Vue data as shown below:

new Vue({
    el: 'myDiv',
    data: {
            dishes: Dishes
          }
       })

And my Json as below:

Dishes = [
            {
                Id: 1,
                Name: "First dish",
                Rating: 2.5
            },
            {   
                Id: 2,
                Name: "Second dish",
                Rating: 1.5
            },
            {
                Id: 1,
                Name: "Third dish",
                Rating: 4.5
            }
        ]

Which I use in my DOM as shown below:

<ol id="myDiv">
   <li v-for="dish in dishes">
      {{dish.Name}}
    //call a function to adjust ratings and get the generated html, 
    //eg:call function ratingAdjustor(dish.Rating);
  <li>
</ol>

My function ratings adjustor is as shown below:

function ratingAdjustor(rating){
   if(rating % 1 != 1){
      //round to the nearest value
      //maybe nearst value is 3
      var stars = ""; 
      for(i=0; i< roundedRaating; i++){
        stars += '<span>//Star SVG icons highlighted</span>'; 
        // hence 3 highlighted stars
        }
        //rest of the non highlighted stars
      return stars; // which has stars based on ratings
    }
}

Since data manipulation is in dom in 'v-for' I have no idea how to proceed, I want to take rating value from v-for, call a function which gets the nearest value and creates html elements with stars and returns string containing html. But I can't figure out how to do that. 'v-on' helps only if there is any event eg: 'v-on:click="someFunctionName"', since this should happen while running loop not on event, it is getting tricky.

There is no such thing as a "JSON object". Either it's an object - then it's a Javascript object - or it's JSON - then it's a string (that is formatted following certain conventions which together define the JSON format). — connexo
– connexo, Commented Jul 4, 2018 at 10:13
Sorry about that I understand my slip there and I have edited, so any idea how I can proceed in my problem? — Uzair Khan
– Uzair Khan, Commented Jul 4, 2018 at 10:15

connexo · Accepted Answer · 2018-07-04 10:19:00Z

1

Put your function in the methods section of your viewmodel:

methods: {
  ratingAdjustor(rating) {
    if (rating % 1 != 1){
      //round to the nearest value
      //maybe nearst value is 3
      var stars = ""; 
      for(i=0; i< roundedRaating; i++){
        stars += '<span>//Star SVG icons highlighted</span>'; 
        // hence 3 highlighted stars
        }
        //rest of the non highlighted stars
      return stars; // which has stars based on ratings
    }
  }
}

You can then use the method like a normal data property (which you pass a parameter):

<ol id="myDiv">
   <li v-for="dish in dishes">
      Name of the dish:{{dish.Name}} 
      <br />
      Rating: {{ ratingAdjustor(dish.Rating) }}
   <li>
</ol>

Please not that you should create variables inside conditional blocks. Also, your function returns undefined in the else case. Fix that.

answered Jul 4, 2018 at 10:19

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Uzair Khan Over a year ago

Thanks a lot :).. One question though, what if I have multiple Vue components, and I want to have one common function that all can use? because in that case if I write in method section, then I would have to write similar one in all of them, that would be 'duplicate code'. So can't I have a common function I can keep separately?

connexo Over a year ago

Use mixins for that, or simply write them as a module which you can import in your components.

Hòa Nguyễn Coder · Accepted Answer · 2018-07-04 16:49:35Z

1

you can try the following code

 import Dishes from './file.json';
    export default{
        data(){
            return{
                 dishes: Dishes
            }
        },
       
    }

//CREATE file.json
[
    {
        "Id": 1,
        "Name": "First dish",
        "Rating": 2.5
    },
    {   
        "Id": 2,
        "Name": "Second dish",
        "Rating": 1.5
    },
    {
        "Id": 1,
        "Name": "Third dish",
        "Rating": 4.5
    }
]

//show.vue
<ul>
                <li v-for="item in dishes">
                    {{item.Name}}
                </li>
            </ul>

answered Jul 4, 2018 at 16:49

Hòa Nguyễn Coder

4433 silver badges8 bronze badges

Collectives™ on Stack Overflow

Calling a function dynamically in Vue Js for loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related