Question

我正在Vuejs中构建应用程序，在其中为input字段创建渲染功能。我发出一个input event与v-model绑定。我可以看到在分配/插入任何值时都分配了值，但是当我以其他方式分配时，即为v-model输入字段分配任何值时，它显示为空，或者显示占位符值（如果可用）

这是我的代码：

createElement('input', {
    class: 'form-control m-input',
    attrs: { type: this.type, placeholder: this.placeholder },
    on: {
        input: (event) => {
            this.$emit('input', event.target.value)
        }
    }
})

在道具中，我有：

props: {
    label: String,
    type: String,
    placeholder: String,
},

在声明组件的同时：

<nits-input
        label="Email"
        type="email"
        placeholder="Enter your email"
        v-model="email"
>
</nits-input>

在数据中，我试图分配值：

data() {
    return {
        email: 'test@example.com',
    }
},

如何实现为v模型分配值并将其显示在各个字段中。帮我解决这个问题。谢谢。

Answer 1

v-model实际上只是拥有value道具并发出输入事件的简写。

因此，除了现有的道具外，您还需要添加一个值：

props: {
    label: String,
    type: String,
    placeholder: String,
    value: String
},

Vue.js渲染功能中的两种方式绑定

1 个答案: