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.

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

Answer 2

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.