Блог

Привязка v-модели в динамической таблице с неизвестным ключом от объекта

Привет!

Я создаю динамическую таблицу из динамичного объекта. (Что означает, что я не знаю, какие ключи будут в этом объекте.

Это прекрасно работает. Хотя теперь я хочу связать ключи в объекте в поле ввода. Это не работает. Он отобразит правильное значение ключа, но не привязывает его обратно к объекту данных.

 <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" />
 

Хотя это просто добавит новый ключ в объект под названием «имя».

Как я могу привязать поле ввода обратно в объект, не зная ключей?

Вы можете использовать такие значения динамических ключей, как:

     <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>