javascript - 对我生成的每个索引创建不同的 V-MODEL

Question

如何在生成的每个对象上拥有不同的 V-MODEL

我正在尝试制作一个示例纸杯蛋糕网站，可以在一次提交中生成多个表单。

但是当我生成 2 个字段时，2 个生成字段的输入相互绑定(bind)。

这是我尝试生成的代码:

<template>
  <div>
    <button @click="cupcakes.push(def)">Add Cup Cake</button>

    <div v-for="(cupcake, index) in cupcakes" :key="index">
      <input type="text" v-model="cupcakes[index].name">
      <input type="text" v-model="cupcakes[index].description">
      <input type="text" v-model="cupcakes[index].type">
      <input type="text" v-model="cupcakes[index].prize">
      <input type="text" v-model="cupcakes[index].color">
    </div>

    <button @click="onSubmit">Create Cupcate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cupcakes: [],
      def: {
        name: '',
        description: 'Originals',
        type: 'small',
        prize: 500,
        color: 'color'
      }
    }
  },

  methods: {
    onSubmit() {
      console.log(this.cupcakes);
    }
  }
}
</script>

我尝试做其他事情，但没有成功。

如何取消绑定(bind) 2 字段，并且当我提交时它将接受我键入或输入的输入。

Answer 1

您正在将同一个对象 (def) 推送 n 次到您的纸杯蛋糕数组中。 def 是对对象的引用。因此，当您更新 cupcakes[n] 时，您只是更新 def 值。

您需要做的就是将该对象的副本发送到纸杯蛋糕对象中:

<button @click="cupcakes.push(JSON.parse(JSON.stringify(def)))">Add Cup Cake</button>

我认为更好的模式是创建一个返回新纸杯蛋糕的方法:

<template>
  <div>
    <button @click="cupcakes.push(getNewCupcake())">Add Cup Cake</button>

    <div v-for="(cupcake, index) in cupcakes" :key="index">
      <input type="text" v-model="cupcakes[index].name">
      <input type="text" v-model="cupcakes[index].description">
      <input type="text" v-model="cupcakes[index].type">
      <input type="text" v-model="cupcakes[index].prize">
      <input type="text" v-model="cupcakes[index].color">
    </div>

    <button @click="onSubmit">Create Cupcate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cupcakes: []
    };
  },
  methods: {
    onSubmit() {
      console.log(this.cupcakes);
    },
    getNewCupcake() {
      return {
        name: "",
        description: "Originals",
        type: "small",
        prize: 500,
        color: "color"
      }
    }
  }
};
</script>