使用v-for和操纵数组的V-模型

Question

在这种情况下，我无法弄清楚如何使用v模型更改量数组进行操作。

使用此代码，我为每个项目生成了输入，并且我希望通过此输入更改数组中每个项目的金额，例如：如果写入第一个输入10，则第一个项目金额数组将为10、10、10、10、10、10 < / p>

我试图用索引制作动态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尚未定义的值。

在这种情况下，您不需要进行任何建模，只需要响应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>