道具值未在 vuejs 中呈现

Question

我正在尝试在 Laravel 5.3 应用程序的 vuejs 中创建一个 ajax 表单组件。但是，我想，我一直坚持显示表单字段。谁能帮帮我？

呈现表单的前端：

<ajax-form
    :autocomplete=false
    :schema="[{
        label: 'Username:',
        type: 'text',
        id: 'username',
        name: 'username',
        placeholder: 'Eg. johndoe',
        inputClass: 'input is-info',
        model: 'username',
        required: true,
    }, {
        label: 'Email:',
        type: 'email',
        id: 'email',
        name: 'email',
        placeholder: 'Eg. johndoe@example.com',
        inputClass: 'input is-info',
        model: 'email',
        required: true,
    }, {
        label: 'Password',
        type: 'password',
        id: 'password',
        name: 'password',
        placeholder: 'Eg. password',
        inputClass: 'input is-info',
        model: 'password',
        required: true,
    }, {
        label: 'Confirm Password',
        type: 'password',
        id: 'confirm_password',
        name: 'confirm_password',
        placeholder: 'Eg. password',
        inputClass: 'input is-info',
        model: 'confirm_password',
        required: true,
    }]"
></ajax-form>

还有 AjaxForm.vue 文件中的template：

<form method="POST">
    <div v-for="field in schema">
        <label class="label">{{ field.label }}</label>
        <p class="control">
            <input
                type="field.type"
                name="field.name"
                id="field.id"
                class="field.inputClass"
                placeholder="field.placeholder"
                required="field.required"
                v-model="field.model"
            >
        </p>
    </div>
</form>

以及script标签的内容：

<script>
    export default {
        props: {
            autocomplete: Boolean,
            schema: Array
        }
    }
</script>

问题在于，表单字段未正确呈现。看图：

我想要的是：

P.S.：我刚刚开始学习组件，所以，这可能是一个愚蠢的错误。

Answer 1

您在循环中设置文字值，您需要使用v-bind: 或简写:：

<input
  :type="field.type"
  :name="field.name"
  :id="field.id"
  :class="field.inputClass"
  :placeholder="field.placeholder"
  :required="field.required"
  v-model="field.model"
/>

编辑

您不能以这种方式绑定v-model，而是需要将其绑定到数据。最简单的方法是创建一个值数组，然后在您创建的组件挂钩中设置它。 Vue 不直接绑定到数组，所以你必须将一个对象推送到数组上：

created() {
  this.inputs.forEach((input) => {
    // push new value object to array
    this.values.push({value: input.value})    
  });
},
data() {
  return {
    values: []
  }
}

现在，在您的 v-for 中，您可以将输入绑定到具有索引的值：

  <div v-for="(input, index) in inputs">
    <input  v-model="values[index].value" />
  </div>

这是工作的 JSFiddle：

https://jsfiddle.net/xsg91o04/