Как передать строковое значение в v-модель, которая указывает на объект данных (динамическая оценка)

Question

Я хочу передать значение объекта (product.id) на v-model входа. Проблема в том, что когда я это делаю, я получаю строку «product.id», а не product.id как объект. Как я могу преобразовать строку? Или это неправильный путь?

Я пробовал JSON.parse, но он не работал.

<template>
  <div>
    <div v-for="field in fields" :key="field.id">
      <label>{{ field.name }}</label>
      <input type="text" v-model="field.model" />
    </div>
  </div>
</template>

<script>
    export default{
      data() {
        return {
          product: {
            id: '',
            name: '',
            price: ''
          },
          fields: [
            {
              name: 'Name 1',
              model: 'product.id',
            }, 
            {
              name: 'Name 2',
              model: 'product.name',
            }, 
            {
              name: 'Name 3',
              model: 'product.price',
            }
          ]
        }
      }
    }
</script>

Answer 1

Не знаю, почему вы хотели это сделать, но поскольку v-model принимает только объект, я могу думать только о том, как переназначить field.model с оцененными версиями как объект. Не обязательно хороший подход, но работает:

new Vue({
  el: '#app',

  data() {
    return {
      product: {
        id: '112233',
        name: 'Random name',
        price: '$34.5'
      },

      fields: [{
          name: 'Name 1',
          model: 'product.id',
        },
        {
          name: 'Name 2',
          model: 'product.name',
        },
        {
          name: 'Name 3',
          model: 'product.price',
        }
      ]
    }
  },

  computed: {
    specialFields() {
      return this.fields.map(item => Object.assign(item, {
        model: eval(`this.${item.model}`)
      }));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="field in specialFields" :key="field.id">
    <label>{{ field.name }}</label>
    <input type="text" v-model.trim="field.model" />
  </div>
</div>