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)

Chris Steenekamp
@chrisformula
@yyx990803 this would make a great Vue Mastery course
mtancoigne
@mtancoigne:matrix.org
[m]
neither, I usually try not to rely on dependencies when I can avoid it...
Chris Steenekamp
@chrisformula
@mtancoigne:matrix.org same here but I have no idea how to strat 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
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?