Добавление нескольких входных чисел с использованием Vue.js

Question

Я ищу, чтобы добавить несколько входов вместе до сих пор. Я достиг двух результатов.

Во-первых, используя на входе, вычисленный результат будет складывать вместе каждую введенную цифру.

Во-вторых, используя v-модель, как вы бы с помощью флажка, чтобы положить в массив, но все коробки в конечном итоге соответствуют друг другу.

Короткий кусок кода есть следующий:

<template> 
       <div class="panel panel-default"> 
        <div class="panel-heading">{{credits}}</div> 
         <div v-for="meal in title"> 
         <input v-bind:id="meal" v-model.number="used_credits" type="number">{{used_credits}} 
        <div class="panel-body"> 

        </div> 
       </div> 

</template> 

Спасибо

Answer 1

Хорошо, это (немного) немного сложнее. При работе с v-образной моделью в цикле шаблонов мы должны убедиться, что назначенная модель отличается для каждой итерации. В противном случае все входы будут привязаны к одному и тому же экземпляру модели. Мы можем достичь этого, используя объект, который хранит все модели и получает доступ к ним с помощью ключа, доступного в цикле. Вот код (на основе вашего фрагмента кода):

<template> 
 
    <div> 
 
    <div>{{ credits }}</div> 
 
    <div v-for="meal in meals"> 
 
     <input :id="meal" v-model.number="creditsPerMeal[meal]" type="number"> 
 
    </div> 
 
    <div> 
 
     Credits used: {{creditsSum}} 
 
    </div> 
 
    </div> 
 
</template> 
 

 
<script> 
 
    export default { 
 
    name: 'test-component', 
 
    data: function() { 
 
     let meals = [ 
 
     'pizza', 'pasta', 'salad' 
 
     ] 
 

 
     let creditsPerMeal = {} 
 
     for (let meal of meals) { 
 
     creditsPerMeal[meal] = 0 
 
     } 
 

 
     return { 
 
     credits: 10, 
 
     meals, 
 
     creditsPerMeal 
 
     } 
 
    }, 
 
    computed: { 
 
     creditsSum() { 
 
     return Object.values(this.creditsPerMeal).reduce((a, b) => a + b, 0) 
 
     } 
 
    } 
 
    } 
 
</script>

Хитрость в том, что объект, который должен хранить наши модели должен быть предварительно инициализирован со всеми ключами. Если это не так, вычисленное свойство creditsSum не будет обновляться. Имейте в виду, что это может не сработать, если вы получите питание динамически через опору или какие-либо другие средства. Если вам нужно это сделать, рассмотрите возможность использования функции часов вместо вычислимого свойства, которое я использовал в фрагменте.

См. this part of the documentation для получения дополнительной информации об обнаружении изменений Vue и this part о вычисленных свойствах против наблюдателей.

Edit: В случае, если вы не используете transpiler как Babel вы, возможно, придется заменить все let с var и петлю следующим образом в фрагменте выше:

var meals = [ 
    'pizza', 'pasta', 'salad' 
    ] 

    var creditsPerMeal = {} 
    for (var i = 0; i < meals.length; i++) { 
    creditsPerMeal[meals[i]] = 0 
    }