在Vue Js for循环中动态调用函数答案

【问题标题】：Calling a function dynamically in Vue Js for loop在Vue Js for循环中动态调用函数
【发布时间】：2018-07-04 10:01:48
【问题描述】：

我有一个 json，我保存在我的 Vue 数据中，如下所示：

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

我的Json如下：

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

我在我的 DOM 中使用如下所示：

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

我的功能评分调节器如下图：

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

由于数据操作在'v-for'中的dom中，我不知道如何继续，我想从v-for中获取评级值，调用一个函数来获取最接近的值并创建带有星号的html元素并返回包含 html 的字符串。但我不知道该怎么做。 'v-on' 仅在有任何事件时才有帮助，例如：'v-on:click="someFunctionName"'，因为这应该在运行循环而不是事件时发生，这变得很棘手。

【问题讨论】：

没有“JSON 对象”这样的东西。要么是 object - 然后是 Javascript 对象 - 要么是 JSON - 然后是 string（按照共同定义 JSON 格式的某些约定进行格式化）。
很抱歉，我理解了我的滑动并且我已经编辑了，所以知道如何解决我的问题吗？

标签： jquery html vue.js

【解决方案1】：

将您的函数放在视图模型的methods 部分：

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

然后您可以像使用普通数据属性（您传递参数）一样使用该方法：

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

请不要在条件块中创建变量。此外，您的函数在 else 情况下返回 undefined。修复它。

【讨论】：

非常感谢 :).. 不过有一个问题，如果我有多个 Vue 组件，并且我想拥有一个所有人都可以使用的通用功能怎么办？因为在那种情况下，如果我在方法部分写，那么我将不得不在所有这些部分中写类似的，那将是“重复代码”。所以我不能有一个可以分开保存的通用功能吗？
为此使用 mixins，或者干脆将它们写成一个模块，您可以将其导入到您的组件中。

【解决方案2】：

你可以试试下面的代码

 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>

【讨论】：