NO LONGER MAINTAINED: Please migrate to http://chat.vuejs.org/ for the new and improved community chat
neither, I usually try not to rely on dependencies when I can avoid it...
*start
Because I want to create a form builder which sends the element data to my db which I can retrieve and then display back
similarily to SurveyJS
You can start with a JSON schema describing your form, then display the elements accordingly in a vue component maybe ?
if I had to do stuff like this, i'll probably go with something like:
[
{ "name": "name", "label": "Your name", "type": "string", "required": true },
{ "name": "message", "label": "Your message", "type": "text", "required": true }
]
(of course, with many other attributes if necessary: min, max, validator function name, ...)
then i'd have a meta component taking a field definition as prop, and which would display the correct input
So just to clarify, I do a JSON Schema file that describes what I need in the form and then add an additional meta component which matches input to prop ?
is it worth using this https://github.com/jinkin1995/vue-json-edit and https://github.com/yourtion/vue-json-ui-editor?
<!-- 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 */ },
},
}
That's raw, but interesting :)
<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 */ },
},
}
I have web application (classic server side generated using spring) and I would like to use vue components on certain pages . what is the best way to integrate vue into an application like this ? most examples I see are for using vue as a SPA using vue cli
i made this shuffled list a while ago without cli build. bit old but it should still work similarly https://mikeful.kapsi.fi/trigwork/
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:
@kenalex: not really, but it is pretty simple. For a good start without webpack and other tools, use the bundled Vue script (from their release, or from a CDN), and code as you would usually do with JS :)
@miko-github: the prop is
value :)
and you will have to
$emit something (input or change) when the value changes in the component, so the "parent" can update the value in its state
1 reply
Basically, you want something like this:
<my-custom-component v-model="some.data" />, so MyCustomComponent should have a prop to receive the value (value prop)
once the value change,
MyCustomComponent have to notify the parent of the change, so it can update some.data
to achieve this, it has to
$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
note that you can't mutate
value in MyCustomComponent, as it's a prop and a bad idea to mutate it
so you'll have to bind it to another variable in the custom component, and watch for changes...
I can go further but I think you'll get it :)
3 replies
you're welcome !
Is there some framework that allows for developing a Vue app for BOTH mobile and web in the same project, so that they share business logic, but still look visually different? I have used Nuxt.js in the past and love it, but that's for web only. Then I am reading about Ionic, but not sure how/if they work together?
Not that I heard of, but I managed to have a small project build for web and mobile with Cordova and a really small overhead for the two different entry points.
Is it possible to build paypal payment gateway integration on the front-end only?