Как мне динамически обновлять значения свойств объекта по отношению к входному значению в Vuejs - PullRequest
Новая
       3

Как мне динамически обновлять значения свойств объекта по отношению к входному значению в Vuejs

0 голосов
/ 04 мая 2020

У меня проблемы с расчетом, который я пытаюсь сделать. Идея состоит в том, что для каждого продукта существует установленное количество порции, но пользователь может ввести размер порции по своему выбору и затем обновить макроэлементы.

У меня есть поле ввода, в котором пользователь может обновить размер порции: 

<div class="serving">
     <p class="details__heading">Serving Size (g)</p>
     <input type="number" placeholder="40" v-model="productServSize" @input="UpdateProductServSize">
</div>

Затем я передаю выбранный продукт из родительского и устанавливаю начальный размер порции, который у продукта уже есть. Макроэлементы уже добавлены в продукт для первой порции. Затем при вводе я хочу обновить значения макроэлементов этого продукта в соответствии с новым размером порции, введенным пользователем: 

export default {
    data () {
        return {
            productServSize: 0,
        }
    },

    props: [
        'product',
    ],

    methods: {
        serving () {
            const num = this.product.servingSize.split(' ')[0]
            this.productServSize = parseFloat(num)
        },

        UpdateProductServSize () {
            const ogServ = this.product.servingSize.split(' ')[0]

            Object.keys(this.product.macros).forEach(key => {
                const num = parseFloat(this.product.macros[key].split(' ')[0])
                this.product.macros[key] = `${(num / ogServ * this.productServSize).toFixed(1)} g`
            })
        }
    },

    mounted () {
        this.serving()
    }
}

Я не уверен, где именно я ошибаюсь, поскольку ценности, которые я получаю, далеки. Любая помощь будет принята с благодарностью.

...