道具值未在 vuejs 中呈现

Posted 2023-02-23

【中文标题】道具值未在 vuejs 中呈现

【英文标题】：Props values not rendering in vuejs

【发布时间】：2017-03-12 02:34:00

【问题描述】：

我正在尝试在 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. [e-mail]',
        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.：我刚刚开始学习组件，所以，这可能是一个愚蠢的错误。

【参考方案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/

【讨论】：

也试过了..表单根本无法显示..它就消失了。

您是否在控制台中遇到任何错误？看起来你是在直接修改一个道具。

是的..错误显示在我的终端而不是chrome的控制台中..这是错误消息：template syntax error <input :type="field.type" v-model="field.model">: v-model does not support dynamic input types. Use v-if branches instead.

你用的是什么版本的vue？

Vue.js的版本是2.0.3