Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 31 2019 22:22
    visualfanatic edited #9403
  • Jan 31 2019 22:04
    visualfanatic opened #9403
  • Jan 31 2019 18:25

    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)

  • Jan 31 2019 17:29
    yyx990803 closed #9402
  • Jan 31 2019 17:20
    devedse opened #9402
  • Jan 31 2019 16:49
    Justineo closed #9401
  • Jan 31 2019 16:40
    Giwayume opened #9401
  • Jan 31 2019 15:24
    yyx990803 closed #9396
  • Jan 31 2019 15:24

    yyx990803 on dev

    fix: fix child forceUpdate regr… (compare)

  • Jan 31 2019 15:08
    yyx990803 closed #9382
  • Jan 31 2019 15:08

    yyx990803 on dev

    fix: fix v-bind:style for camel… (compare)

  • Jan 31 2019 15:08
    yyx990803 closed #9386
  • Jan 31 2019 15:04

    yyx990803 on dev

    chore: update sponsors [ci skip… (compare)

  • Jan 31 2019 15:04

    yyx990803 on patreon-update-1548947041032

    (compare)

  • Jan 31 2019 15:04
    yyx990803 closed #9400
  • Jan 31 2019 15:04

    vue-bot on patreon-update-1548947041032

    chore: update sponsors [ci skip] (compare)

  • Jan 31 2019 15:04
    vue-bot opened #9400
  • Jan 31 2019 14:59

    yyx990803 on patreon-update-1548924868622

    (compare)

  • Jan 31 2019 14:58
    yyx990803 closed #9393
  • Jan 31 2019 14:56

    yyx990803 on dev

    fix: allow more enumerated valu… (compare)

mtancoigne
@mtancoigne:matrix.org
[m]
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, ...)
Chris Steenekamp
@chrisformula
mtancoigne
@mtancoigne:matrix.org
[m]
yes, why not !
then i'd have a meta component taking a field definition as prop, and which would display the correct input
Chris Steenekamp
@chrisformula
Thanks for the help bro, really appreciate it, I have been trying to figure this out for a while now
mtancoigne
@mtancoigne:matrix.org
[m]
you're welcome! those are the kind of questions I like :)
Chris Steenekamp
@chrisformula
Awesome
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 ?
mtancoigne
@mtancoigne:matrix.org
[m]
<!-- 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) }
  }
}
...
Chris Steenekamp
@chrisformula
You are awesome bro thanks
mtancoigne
@mtancoigne:matrix.org
[m]
<!-- 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 :)
Chris Steenekamp
@chrisformula
Wow dude the help is so much appreciated
mtancoigne
@mtancoigne:matrix.org
[m]
glad that helps :)
Chris Steenekamp
@chrisformula
thanks again
mtancoigne
@mtancoigne:matrix.org
[m]
I wish you a good journey through building your form builder!
Gabriel Cursino
@gabrielcursino
My input mask for Vue 3 and Ionic Vue https://github.com/ionited/mask-vue
小公主
@codprincess
<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 */ },
  },
}
Kenroy
@kenalex
hello everyone
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
mtancoigne
@mtancoigne:matrix.org
[m]
@kenalex: You can use Vue outside of an SPA
mikeful
@mikeful:hacklab.fi
[m]
i made this shuffled list a while ago without cli build. bit old but it should still work similarly https://mikeful.kapsi.fi/trigwork/
Kenroy
@kenalex
@mtancoigne:matrix.org do you know of any articles how to use Vue outside of a SPA ?
mikoloism
@miko-github

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:

mtancoigne
@mtancoigne:matrix.org
[m]
@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 isvalue :)
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
mtancoigne
@mtancoigne:matrix.org
[m]
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
mikoloism
@miko-github
thanks :heart: :star:
mtancoigne
@mtancoigne:matrix.org
[m]
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 !
Mattias Lindvall
@thnee_gitlab
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?
mtancoigne
@mtancoigne:matrix.org
[m]
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.
StevenSmith0918one
@StevenSmith0918one
Hello, Eveyone.
Is it possible to build paypal payment gateway integration on the front-end only?
yrkCode
@yrkCode
Hello
Chris Steenekamp
@chrisformula
Hello
ghyer
@ghyer
Hello
Freddy
@fjeddy

@MikeBison : Thank you for the update, i am using typescript in VUE. what is main.js and could you please explain me how it works with typescipt

Read the first sentence of Vue, literally right below how you install it. Jesus

Hello, guys! Please tell me how I can contribute to vue.js

If you have to ask......

So basically like this https://vuejsfeed.com/blog/generate-forms-using-json-schema-and-vue-js

Most form builders available don't have dependencies, for you to create your own instead of using one of the existing ones is kind of pointless, unless your doing it for educational purposes or need something specific.

Dependencies is not a bad thing, not generally, it get's really bad when your dependencies have dependencies that have dependencies. But what you're doing here is just re-inventing the wheel, for no reason. And your likely going to do it worse then the solutions that exists.