How to bind "v-model" property in vue? - vue.js

Question

I want to show list of inputs dynamically.
I am not asking about using v-bind OR v-model, I want to bind v-model property itself (like v-bind:v-model).
Here is the code but it does not work.
<template>
<div class="form-outside">
<form>
<div v-for="(input, index) in inputs" :key="index">
<div class="caption">{{input.caption}}</div>
<input :type="input.type" :v-model="input.model" />
</div>
<div v-if="error" class="error-message">{{error}}</div>
<div v-if="kind=='login'" class="suggestion">
Don't have an account?
<nuxt-link to="/signup">Sign up</nuxt-link> instead!
</div>
<div v-if="kind=='signup'" class="suggestion">
Have an account?
<nuxt-link to="/login">Log in</nuxt-link> instead!
</div>
<div v-if="loading" class="loading">Loading</div>
<button #click.prevent="submitted" v-if="!loading">{{button_text}}</button>
</form>
</div>
</template>
<script>
export default {
name: "AuthForm",
props: ["kind", "error", "loading"],
methods: {
submitted() {
this.$emit("submitted", {
email: this.email,
password: this.password,
confirm_password: this.confirm_password,
full_name: this.full_name,
login: this.login,
username: this.username
});
}
},
computed: {
button_text() {
if (this.kind == "login") return "Log in";
if (this.kind == "signup") return "Sign up";
},
inputs() {
return this.possible_inputs.filter(
input => input.when == "always" || input.when == this.kind
);
}
},
data() {
return {
email: "",
password: "",
confirm_password: "",
full_name: "",
login: "",
username: "",
possible_inputs: [
{
caption: "Full Name",
type: "text",
when: "signup",
model: this.full_name
},
{
caption: "Email",
type: "email",
when: "signup",
model: this.email
},
{
caption: "Email or Username",
type: "text",
when: "login",
model: this.login
},
{
caption: "Username",
type: "text",
when: "signup",
model: this.username
},
{
caption: "Password",
type: "password",
when: "always",
model: this.password
},
{
caption: "Confirm Password",
type: "password",
when: "signup",
model: this.confirm_password
}
]
};
}
};
</script>
(This is some additional text because stackoverflow says “It looks like your post is mostly code, please add some more details”, just ignore it)

Answer 1

In data(){} you cannot assign in this way model: this.email so you need to assign it in mounted() {} hook, check the code below:
<script>
export default {
data() {
return {
email: "",
password: "",
confirm_password: "",
full_name: "",
login: "",
username: "",
possible_inputs: []
};
},
mounted() {
this.possible_inputs = [
{
caption: "Full Name",
type: "text",
when: "signup",
model: this.full_name
}, {
caption: "Email",
type: "email",
when: "signup",
model: this.email
}, {
caption: "Email or Username",
type: "text",
when: "login",
model: this.login
}, {
caption: "Username",
type: "text",
when: "signup",
model: this.username
}, {
caption: "Password",
type: "password",
when: "always",
model: this.password
}, {
caption: "Confirm Password",
type: "password",
when: "signup",
model: this.confirm_password
},
];
},
};
</script>