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

Question

我正在生成一个带有自动生成名称的 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': '',
            }
          });
        }
      },
    },
  });

Answer 1

您可以将名称另存为 react 数据。例如，将其保存在 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]">