如何将 v-model 的数组值获取到 Vue.Js 脚本中的数组对象？

Question

我有一个动态输入字段，我可以根据自己的要求添加和删除。但是当我尝试将 v-model 的数组值获取到一个对象时，它会显示未定义的值。我无法在脚本部分的模板中获取 v-model 的数组值。

模板代码

<div v-for="(record, index) in records" :key="record.name">
      <b-card style="margin-top:18px;">
        <span @click="remove(index)" v-if="index != 0">
          <strong>
            <b class="text-danger float-right">X</b>
          </strong>
        </span>
        <br />
        <b-form-group
          label-cols="12"
          label-cols-lg="3"
          label-for="input-1"
          label="Name: "
          label-align-sm="right"
          label-align="left"
        >
          <b-form-input
            id="input-1"
            v-model="record.name"
            type="text"
          ></b-form-input>
        </b-form-group>

        <b-form-group
          label-cols="12"
          label-cols-lg="3"
          label-for="input-2"
          label="Order: "
          label-align-sm="right"
          label-align="left"
        >
          <b-form-input
            id="input-2"
            v-model="record.order"
            type="text"
          ></b-form-input>
        </b-form-group>
      </b-card>
      <div>
        <span @click="add">
          <strong>
            <b class="text-success float-right">+</b>
          </strong>
        </span>
      </div>
    </div>

脚本代码

<script>
export default {
  data: () => ({
    update: false,
    records: [
      {
        name: "",
        order: ""
      }
    ]
  }),
  methods: {
    save(evt) {
      evt.preventDefault();
      var object = {
        name: this.records.name,
        order: this.records.order
      };
      console.log(object);
    },

    add() {
      this.records.push({
        name: "",
        order: ""
      });
    },
    remove(index) {
      this.records.splice(index, 1);
    }
  }
};
</script>

我已尝试使用 console.log 来查看数据是否显示，但它响应的值为 undefined。

Answer 1

您需要为您的记录数组编制索引。

var object = {
        name: this.records[someIndex].name,
        order: this.records[someIndex].order
      };