javascript - Computed data in table not updating after changing radio value

Question

I have the following problem with the data table I'm trying to implement in my VueJS frontend. When I try to change the supplier, the price needs to be updated in the cost column on the far right column of the table, and same for the total cost given by a computed property. I don't understand why the data is not being updated, I've tried this.$forceUpdate() and nothing works..

Thanks for your help.

    <template>
   <div>
      <v-row>
         <v-col
             cols="2">
            <v-date-picker
                v-model="dateRange"
                range show-adjacent-months
                @input="fetchWeeklyIngredients"/>

            <h1>Total cost: ${{Math.round(totalCost)}}</h1>
         </v-col>
         <v-col>
            <v-simple-table>
               <template v-slot:default>
                  <thead>
                  <tr>
                     <th class="text-left">
                        Ingredient
                     </th>
                     <th class="text-left">
                        Weight
                     </th>
                     <th class="text-left">
                        Status
                     </th>
                     <th class="text-left">
                        Suppliers
                     </th>
                     <th class="text-left">
                        Cost
                     </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr
                      v-for="ingredient in ingredients"
                      :key="ingredient.id">
                     <td>{{ ingredient.name }}</td>
                     <td>{{ Math.round(ingredient.weight*100)/100 }}</td>
                     <td>{{ ingredient.status }}</td>
                     <td>
                        <v-radio-group
                            v-if="ingredient.suppliers.length"
                            v-model="ingredient.selectedSupplier">
                           <v-radio
                               v-for="supplier in ingredient.suppliers"
                               :key="supplier.id"
                               :value="supplier"
                               :label="supplier.name+' | Priority: '+supplier.priority+' | Price: '+supplier.cost"/>
                        </v-radio-group>
                     </td>

                     <td v-if="ingredient.selectedSupplier">
                        {{Math.round(ingredient.weight*ingredient.selectedSupplier.cost)}}
                     </td>
                  </tr>
                  </tbody>
               </template>
            </v-simple-table>
         </v-col>
      </v-row>
   </div>
</template>



<script>

import axios from 'axios'
export default {
   name: "WeeklyIngredients",
   data(){
      return{
         dateRange:[],
         ingredients: [],
         headers:[
            {
               text: 'Ingredient',
               align: 'start',
               sortable: true,
               value: 'name',
            },
            {
               text: 'Weight',
               value: 'weight',
               sortable: true
            },
            {
               text: 'Status',
               value: 'status',
               sortable: true
            },
            {
               text: 'Suppliers',
               value: 'suppliers',
               sortable: false
            },
            {
               text: 'Cost',
               value: 'cost',
               sortable: true
            }
         ],
         loading: false,
         itemsPerPage: 10
      }
   },
   computed:{
      sortedDateRange(){
         return this.dateRange.sort()
      },
      totalCost(){
        return this.ingredients
             .filter(ingredient => ingredient.selectedSupplier)
             .reduce((totalCost, ingredient) =>
                 totalCost + ingredient.weight*ingredient.selectedSupplier.cost,
                 0)
      }
   },
   methods:{
      fetchWeeklyIngredients(){
         if(this.sortedDateRange.length<2){return;}

         this.loading = true;

         axios.get("/kitchenReport/ingredients/"+this.sortedDateRange[0]+"/"+this.sortedDateRange[1])
             .then(({data}) => {
                this.ingredients = data.ingredients;
                this.ingredients.map((ingredient,index) => {
                   if(ingredient.suppliers.length>0){
                      this.ingredients[index].selectedSupplier = this.ingredients[index].suppliers[0];
                   }
                })
                this.loading=false;
             })
      },
      selectedSupplierCost(suppliers){
         if(!suppliers.length>0){return 0;}

         const selectedSupplier = suppliers.find(supplier => supplier.selected)
         return (selectedSupplier ? selectedSupplier.cost : 0)
      }
   }
}
</script>

EDIT: This is the structure of the ingredients array of objects:

Answer 1

等待大神答复