V-модель с использованием V-для и манипулирования массивом

Question

Я не могу понять в этом случае, как манипулировать с массивом количеств изменений v-модели.

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

Я пытался создать динамическую опору v-модели с индексом, но она не сработала.

вот моя скрипка: http://jsfiddle.net/eywraw8t/532119/ кто-нибудь может мне помочь?

category: [{
            id: 0,
            sub: 'a1',
            types: [{
                    id: 1,
                    value: "P A",
                    amounts: [20, 32, 20, 12, 12, 2]
                },
                {
                    id: 2,
                    value: "P B",
                    amounts: [0, 32, 20, 12, 12, 2]
                },
                {
                    id: 3,
                    value: "P C",
                    amounts: [30, 32, 20, 12, 12, 2]
                },
                {
                    id: 4,
                    value: "P D",
                    amounts: [50, 32, 12, 30, 12, 2]
                }
            ]
        }]



<div id="app">

<div v-for="item in category">
    <h1>
        {{item.sub}}
    </h1>
    <div v-for="type in item.types"> 
        {{type.value}}  
        <input type="text" v-model="someModel">
         <div>
        <ul>
            <li v-for="amount in type.amounts">{{amount}}</li>
        </ul>
    </div>
    </div>

</div>
</div>

Answer 1

Вы никогда не захотите v-model значение, которое вы не определили.

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

new Vue({
  el: "#app",
  data: {
      category: [
      {
                id: 0,
                sub: 'a1',
                types: [{
                        id: 1,
                        value: "P A",
                        amounts: [20, 32, 20, 12, 12, 2]
                    },
                    {
                        id: 2,
                        value: "P B",
                        amounts: [0, 32, 20, 12, 12, 2]
                    },
                    {
                        id: 3,
                        value: "P C",
                        amounts: [30, 32, 20, 12, 12, 2]
                    },
                    {
                        id: 4,
                        value: "P D",
                        amounts: [50, 32, 12, 30, 12, 2]
                    }
                ]
            },
             {
                id: 0,
                sub: 'a2',
                types: [{
                        id: 1,
                        value: "P A",
                        amounts: [20, 32, 20, 12, 12, 2]
                    },
                    {
                        id: 2,
                        value: "P B",
                        amounts: [0, 32, 20, 12, 12, 2]
                    },
                    {
                        id: 3,
                        value: "P C",
                        amounts: [30, 32, 20, 12, 12, 2]
                    },
                    {
                        id: 4,
                        value: "P D",
                        amounts: [50, 32, 12, 30, 12, 2]
                    }
                ]
            }]

  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    setAllAmounts(type, event) {
    	type.amounts = type.amounts.map((_) => event.target.value);
    }
  }
})

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">

  <div v-for="item in category">
    <h1>
      {{item.sub}}
    </h1>
    <div v-for="type in item.types">
      {{type.value}}
      <input type="text" @change="setAllAmounts(type, $event)">
      <div>
        <ul>
          <li v-for="amount in type.amounts">{{amount}}</li>
        </ul>
      </div>
    </div>

  </div>


</div>