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只带一个对象，因此我想到的一种方法是reassign field.model s的版本作为对象。不一定是一种好方法，但可以起作用：

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>

如何将字符串值传递给指向数据对象的v模型（动态评估）

1 个答案: