Question

我必须在vue2中创建一个动态表单。我想将动态字段的值保存在一个命名对象中，以便可以在提交时将其传递。以下代码可以正常工作，除了第一次更改输入值时控制台中出现错误（尽管值会正确传播）：

[TypeError: Cannot read property '_withTask' of undefined]

这是我定义道具的方式：

  props: {
    fields: {
      type: Object,
      default: {startWord: 'abc'}
    },
  },

这就是我从输入字段填充模型的方式：

v-model="fields[field.id]"

这是完整的代码：

<template>
  <div>
    <!-- Render dynamic form -->
    <div v-for="(field, key) in actionStore.currentAction.manifest.input.fields">

      <!-- Text -->
      <template v-if="field.type == 'string'">
        <label>
          <span>{{key}} {{field.label}}</span>
          <input type="text" v-bind:placeholder="field.placeholder" 
                 v-model="fields[field.id]"/>
        </label>
      </template>

    <!-- Footer -->
    <footer class="buttons">
      <button uxp-variant="cta" v-on:click="done">Done</button>
    </footer>
  </div>
</template>

<script>
const Vue = require("vue").default;
const {Bus, Notifications} = require('../../Bus.js');
module.exports = {
  props: {
    fields: {
      type: Object,
      default: {startWord: 'abc'}
    },
  },
  computed: {
    actionStore() {
      return this.$store.state.action;
    },
  },
  methods: {
    done() {
      console.log('fields', this.fields);
      Bus.$emit(Notifications.ACTION_INPUT_DONE, {input: this.fields});
    }
  },
}
</script>

因此，一切都很好（在输入中显示初始值，将新值传播到模型等）。但是，当我第一次输入一个新字符（实际上只是在第一次按键时）时，出现了“ _withTask”错误。出现最初的错误后，它不再弹出。

-附录-

这是清单/字段的样子：

manifest.input = {
  fields: [
    { id: 'startWord', type: 'string', label: 'Start word', placeholder: 'Enter start word here...' },
    { id: 'startWordDummy', type: 'string', label: 'Start word dummy', placeholder: 'Enter start word here...' },
    { id: 'wordCount', type: 'integer', label: 'Word count' },
    { id: 'clean', type: 'checkbox', label: 'Clean up before' },
  ]
}

-更新-

我刚刚发现，如果我最初将动态字段值设置为静态值，我不会得到这样设置的那些字段的错误：

  created() {
    this.fields.startWord = 'abc1';
  },

但这不是选项，因为它将是字段的动态列表。那么处理这种情况的最佳方法是什么？

Answer 1

摘自文档：由于现代JavaScript的局限性（以及Object.observe的放弃），Vue无法检测到属性的添加或删除。由于Vue在实例初始化期间执行getter / setter转换过程，因此，数据对象中必须存在一个属性，以便Vue对其进行转换并使其具有反应性。

据我所知，通过v模型创建对象的键是个坏主意。我要用HTML做什么：

<input type="text" 
   :placeholder="field.placeholder" 
   @input="inputHandler(event, field.id)" />

然后用JS：

methods: {
    // ...
    inputHandler({ target }, field) {
        this.fields[field] = target.value;
    }
},

vue2中的动态表单问题：[TypeError：无法读取未定义的属性'_withTask']

1 个答案: