使用来自对象的未知键绑定动态表中的 v-model答案

【问题标题】：Binding v-model in dynamic table with unknown key from object使用来自对象的未知键绑定动态表中的 v-model
【发布时间】：2021-08-17 12:17:46
【问题描述】：

使用来自对象的未知键在动态表中绑定 v-model

你好！

我正在从一个动态对象创建一个动态表。（这意味着我不知道这个对象中有哪些键。

这很好用。虽然现在我想在输入字段中绑定对象中的键。这不起作用。它将显示正确的键值，但不会将其绑定回数据对象。

<table
          v-if="Object.keys(this.userInfo).length > 1"
        >
          <thead>
            <tr>
              <th>Type</th>
              <th>Value</th>
              <th>Edit</th>
            </tr>
          </thead>
          <tr v-for="(value, name) in userInfo">
            <th>{{ name }}</th>
            <th>{{value}}</th>
            <th>
              <input v-model="value" />
            </th>
          </tr>
        </table>

我试图改变

<input v-model="value" />

到：

<input v-model="userInfo.name" />

虽然这只会在名为“name”的对象中添加一个新键。

如何在不知道键的情况下将输入字段绑定回对象中？

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

您可以像这样使用动态键值：

    <table v-if="Object.keys(userInfo).length > 1">
      <thead>
        <tr>
          <th>Type</th>
          <th>Value</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tr v-for="key in Object.keys(userInfo)" :key="key">
        <th>{{ key }}</th>
        <th>{{ userInfo[key] }}</th>
        <th>
          <input v-model="userInfo[key]" />
        </th>
      </tr>
    </table>

【讨论】：