Vue.js 如何在 v-model 输入的数组中定位具有未知名称的对象

Posted 2023-02-22

【中文标题】Vue.js 如何在 v-model 输入的数组中定位具有未知名称的对象

【英文标题】：Vue.js How to target object with unknown name in an array on v-model input

【发布时间】：2018-09-07 23:17:02

【问题描述】：

我正在使用自动生成的名称生成一个对象 onclick。每次名字都会不一样。然后我想通过使用 v-model 的输入来更改对象的值。如果名称未知，如何定位对象？到目前为止，这是我所拥有的：

<ul>
  <li v-for="type in types" @click="addNew(type)"> type </li>
</ul>

<form v-if="Object.keys(newFields).length !== 0">

  <input type="text" v-model="newFields[0].?????????">

</form>

  <script>
  new Vue (
    el: '#app',
    data: 
      types: [
        'date',
        'number',
        'currency',
        'text',
      ],
      savedFields: [

      ],
      newFields: [

      ]
    ,
    methods: 
      addNew: function (type) 

        const name = `$type-$Object.keys(this.savedFields).map(key => key === type).length`;

        if (Object.keys(this.newFields).length == 0) 
          this.newFields = Object.assign(, this.newFields, 
            [name]: 
              'type': type,
              'displayLabel': '',
              'defaultValue': '',
            
          );
        
      ,
    ,
  );

【参考方案1】：

您可以将名称保存为反应数据。例如，将其保存在currentName

<script>
    new Vue(
        el: "#app",
        data: 
            //...
            currentName: null
        ,
        methods: 
            addNew: function (type) 
                const name = ""; //...

                this.currentName = name;

                //...
            
        
    );

</script>

对于 v 模型，

<input type="text" v-model="newFields[0][currentName]">

【讨论】：

谢谢...我认为这很接近但现在我收到以下错误：渲染错误：“TypeError：无法读取未定义的属性'date-0'”如何解决这个问题？提前致谢！

@LaurenMastroni 我认为原因是newFields 是一个空数组。 newFields[0] 不存在。或许你可以尝试将newFields的初始值设置为[ ]（一个只有1个值的数组，它是一个空对象），这样newFields[0]就不会再被undefined了。不过，我不确定您为什么以这种方式设计数据。希望这不会影响您的应用逻辑。

我也不知道为什么哈哈...谢谢你的帮助！