Блог

Главная - Вопросы по программированию - Vue умножение значений в таблице данных

Vue умножение значений в таблице данных

#javascript #vue.js #vuetify.js

Вопрос:

Как я могу умножить значения в таблице, используя Vue.js? Макро-значения приведены для 100 г продукта. Когда я набираю 200 г, я хотел бы, чтобы значения были удвоены, т. е. 318 ккал, 12 жиров, 48 углеводов, 8 белков, 2% железа. Когда я набираю 50 г: 79,6 ккал, 3 жира, 12 углеводов, 2 белка, 0,5 железа и т.д.

Демонстрационный код здесь

HTML:

 <div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" hide-default-footer>

      <template v-slot:item.quantity="{ item }">
        <v-text-field value="" :placeholder="item.quantity" type="number" suffix="g">
        </v-text-field>
      </template>

    </v-data-table>
  </v-app>
</div>

JS:

 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
        { text: 'Quantity', value: 'quantity' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
          quantity: 0,
        },
      ],
    }
  },
  computed: {
    
  }
})

Комментарии:

1. Можете ли вы показать, что вы пробовали, чтобы мы могли попытаться помочь вам это исправить? Вы должны использовать вычисляемый для вычисления этих значений для вас, когда пользователь вводит что-то.

2. Я считаю, что фильтр был бы лучшим подходом в этом случае. Манипулирование необработанными данными для отображения-это то, для чего предназначены фильтры. vuejs.org/v2/guide/filters.html … это при условии, что вы напишете шаблон для каждого столбца таблицы.

Ответ №1:

Если dessert[].quantity представлена сумма для одного размера порции, вы можете привязать v-text-field » s v-model «к свойству данных (например, с именем» userQuantities «), которое будет использоваться для вычисления множителя:

 <template v-slot:item.quantity="{ item, index }">
  <v-text-field v-model="userQuantities[index]"></v-text-field>
</template>
 
 export default {
  data() {
    return {
      userQuantities: []
    }
  }
}

Затем создайте вычисляемое свойство (например, с именем» computedDesserts «), которое вычисляет пищевые ценности на основе множителя, представляющего собой отношение количества пользователя к размеру одной порции:

 export default {
  computed: {
    computedDesserts() {
      return this.desserts.map((dessert,i) => {
        const qty = this.userQuantities[i] || dessert.quantity
        const multiplier = qty / (dessert.quantity || 1)
        return {
          ...dessert,
          calories: dessert.calories * multiplier,
          fat: dessert.fat * multiplier,
          carbs: dessert.carbs * multiplier,
          protein: dessert.protein * multiplier,
          iron: `${parseInt(dessert.iron) * multiplier}%`,
        }
      })
    }
  }
}

И обновите свой шаблон, чтобы использовать computedDesserts его вместо desserts :

 <v-data-table :items="computedDesserts">

обновленный кодовый набор

Метки: