如何根据vue js表中的行和列标题分配单元格值

Question

对于我的表格，下面是显示其组件的代码：

<tbody style="border-bottom:#dbb100 1px"  v-for="(item,itm_index) in itemList" :key="itm_index.id" >
      <tr class="left-align">
           <td>{{item.name}}</td>
           <td v-for="(day, day_index) in days" :key="day_index.id" v-if="getTotalWork(itm_index, day_index)==true">{{newValue}}</td>
      </tr>
</tbody>

这是我的方法，据说会更新它对应的行和列上的值。

getTotalWork(item_index, day_index) {
        let item = this.itemList[item_index];
        let day = this.days[day_index];
        let getDate = this.template.date;
        item = item.name;

        if(this.costList.length > 0){
            if(day < 10) day = '0'+day;
            var searchItem = this.costList.find(emp => emp.name === item);

                if(searchItem.name == item && searchItem.date ==this.monthYear+'-'+day){
                    this.newValue = searchItem.total_work;
                }else{
                    this.newValue = 0;
                }
        }
        return true;
    },    

我现在的问题是，它不是只更新它对应的列和行，而是用一个值更新所有它，即一个项目的值。以下是示例输出：

我的问题是，如何仅根据 item_index 和 day_index 传递的值更新相应的单元格。此参数的传递值是行和列标题。预期的输出不应该只是499，应该有其他数字。

知道我怎样才能做到这一点吗？在这里卡了将近一天，在我的搜索中没有找到任何运气。

编辑

我不知道如何制作小提琴，但是当我console.log(this.costList)时输出是这样的：

1:
   date: "2018-07-01"
   name:"John Doe"
   total_work:240
2:
   date: "2018-07-02"
   name:"John Doe"
   total_work:242
3:
   date: "2018-07-03"
   name:"John Doe"
   total_work:243

Answer 1

您应该让getTotalWork 返回值并将其放在输出中：

<tbody style="border-bottom:#dbb100 1px"  v-for="(item,itm_index) in itemList" :key="itm_index.id" >
  <tr class="left-align">
       <td>{{item.name}}</td>
       <td v-for="(day, day_index) in days" :key="day_index.id">{{getTotalWork(itm_index, day_index)}}</td>
  </tr>
</tbody>

所以你的函数会是这样的：

getTotalWork(item_index, day_index) {
    let item = this.itemList[item_index];
    let day = this.days[day_index];
    let getDate = this.template.date;
    item = item.name;

    //MAX SINEV's answer  
    if(this.costList.length > 0){
        if(day < 10) day = '0'+day;
        var searchItem = this.costList.find(emp => emp.name === item);

            if(searchItem.name == item && searchItem.date ==this.monthYear+'-'+day){
                return searchItem.total_work;
            }else{
                return 0;
            }
    }
    return 0;
}

OP 的修订：

if(this.costList.length > 0){

    if(day < 10){
        day = '0'+day;
    }
    //this.monthYear contains year and date in yyyy-mm format
    var searchItem = this.costList.find(emp => emp.name === item.name && emp.date == this.monthYear+'-'+day);

    if(typeof searchItem != 'undefined'){
        return searchItem.total_work;
    }
}
return 0;