时间戳

首页 > 解决方案 > 如何将字符串值传递给指向数据对象的 v-model（动态评估）

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

问题描述

我想将对象值 ( product.id) 传递给v-model输入的 a。问题是当我这样做时，我得到一个字符串“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>

标签： javascriptvuejs2

解决方案

不知道你为什么要这样做，但由于v-model只接受一个对象，我能想到的一种方法是将s 与评估版本重新分配为对象。不一定是一个好方法，但有效：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>

推荐阅读