NO LONGER MAINTAINED: Please migrate to http://chat.vuejs.org/ for the new and improved community chat
yyx990803 on regression-test
fix: allow more enumerated valu… chore: update sponsors [ci skip… fix: fix v-bind:style for camel… and 1 more (compare)
yyx990803 on dev
fix: fix child forceUpdate regr… (compare)
yyx990803 on dev
fix: fix v-bind:style for camel… (compare)
yyx990803 on dev
chore: update sponsors [ci skip… (compare)
yyx990803 on patreon-update-1548947041032
vue-bot on patreon-update-1548947041032
chore: update sponsors [ci skip] (compare)
yyx990803 on patreon-update-1548924868622
yyx990803 on dev
fix: allow more enumerated valu… (compare)
[
{ "name": "name", "label": "Your name", "type": "string", "required": true },
{ "name": "message", "label": "Your message", "type": "text", "required": true }
]
<!-- meta component -->
<template>
<div class="field">
<label :for="id">{{label}}</label>
<input v-if="type === 'string' type="text" :name="name" :id="id" v-model="internalValue"/>
<!-- ... -->
</div>
</template>
<script>
export default {
name: 'MetaInputField',
props: {
field: { required: true, type: Object },
},
data () { return { internalValue: this.$props.value || '' } }
computed: {
id() { return `${randomString()}-${this.$props.field.name}` },
},
watch: {
internalValue (value){ this.$emit('change', value) }
}
}
<!-- form component -->
<template>
<form action="#" @submit.prevent="save">
<meta-component v-for="field in formSchema" :field="field" :key="field.name" v-model="inputs[field.name]" />
</form>
</template>
<script>
import MetaComponent from 'somewhere'
export default {
name: 'GenericForm',
data () { return { inputs: makeInputsFromSchema()} },
methods: {
makeInputsFromSchema() { /* extract input names somehow, and get the schema first */ },
},
}
<template>
<form action="#" @submit.prevent="save">
<meta-component v-for="field in formSchema" :field="field" :key="field.name" v-model="inputs[field.name]" />
</form>
</template>
<script>
import MetaComponent from 'somewhere'
export default {
name: 'GenericForm',
data () { return { inputs: makeInputsFromSchema()} },
methods: {
makeInputsFromSchema() { /* extract input names somehow, and get the schema first */ },
},
}
Hi there :hand:
anyone can help to me to answering my question?
I'm using bootstrap-vue; then, i saw that give the v-model for change mutable data variables, so, how can i create a custom component to give a v-model? and how access to v-model attribute (or prop, or any name) in my custom component? :bulb:
even i try
export default {
...
props: ['v-model'],
...
}
but not work :smile:
i read the vue docs but it didn't solve my problem
what should i do?
thank :heart:
value
:)
$emit
something (input
or change
) when the value changes in the component, so the "parent" can update the value in its state
<my-custom-component v-model="some.data" />
, so MyCustomComponent
should have a prop to receive the value (value
prop)
MyCustomComponent
have to notify the parent of the change, so it can update some.data
$emit
an event that will be understood by Vue as a value change. I usually use input
or change
event, but can't explain why, it felt logical and worked, so I didn't dig more
value
in MyCustomComponent
, as it's a prop and a bad idea to mutate it