how to use v-model? about babel-plugin-transform-vue-jsx HOT 26 CLOSED

@rhyek, @JsonSong89, @adamvleggett, @nddery, @zheeeng, @weivea, now you can use v-model in JSX if you add my v-model transform.

from babel-plugin-transform-vue-jsx.

You'll have to implement this yourself, as it is not available in render functions.

export default {
  data () {
    return {
      message: 'Salut'
    }
  },

  methods: {
    sync (prop, value) {
      this[prop] = value
    }
  },

  render (h) {
    return (
      <div>
        <input on-input={(e) => this.sync('message', e.target.value)} />
        <p>Message: {this.message}</p>
      </div>
    )
  }
}

See https://vuejs.org/v2/guide/render-function.html#v-model

from babel-plugin-transform-vue-jsx.

I think it should be a separate transform. v-model handles a lot of DOM-specific complexity and it should not be part of this transform (which is only about JSX to render-function conversion).

from babel-plugin-transform-vue-jsx.

@zheeeng for <select /> and <checkbox /> you can use on-change instead of on-input I think.

from babel-plugin-transform-vue-jsx.

From the perspective of a user of Vue, this specific abstraction is fundamental to being able to use JSX with Vue, and I doubt many (or any) developers will prefer it to be a separate transform. However if it really makes more sense to the maintainers of Vue, so be it.

Hopefully all of this can work with pug templates as well.

from babel-plugin-transform-vue-jsx.

@nddery This method doesn't work on <select />, <checkbox /> which you need to bind value on them first.

from babel-plugin-transform-vue-jsx.

v-model is a uniform way to bind value , if must bind in event, it'is really boring.

different element(and customer component) has different event .

from babel-plugin-transform-vue-jsx.

@178220709, if you want we can do a community effort to implement v-model in babel-plugin-transform-vue-jsx since it's an open-source project.

from babel-plugin-transform-vue-jsx.

Please do this. This is the only thing stopping me from switching all my Vue projects over to JSX, which I would much prefer to the proprietary .vue format.

from babel-plugin-transform-vue-jsx.

@adamvleggett, I am not sure @yyx990803 will accept model as a part of vue's official JSX transform. If he's okay I can make it as a part of vue-jsx (which makes sense because v-model is a very common pattern IMO). If not - I will make it a separate transform.

from babel-plugin-transform-vue-jsx.

@adamvleggett, how do you use pug templates with jsx? O_O

from babel-plugin-transform-vue-jsx.

https://www.npmjs.com/package/babel-plugin-react-pug

from babel-plugin-transform-vue-jsx.

@adamvleggett plugins should be focused on one thing only. What you want is a preset that includes thev-model transform by default.

from babel-plugin-transform-vue-jsx.

@adamvleggett, I though I am the only one who misses pug template language... I might have an idea about that. Let me do a POC over the week, I'll keep you up to date in this issue.

from babel-plugin-transform-vue-jsx.

Thanks. I appreciate it. It's not that I love pug, I just think having to close tags is a silly design.

from babel-plugin-transform-vue-jsx.

@yyx990803, this is not a good place to ask but I don't know any other, what do you think if some part of the community that still likes pug (like me and @adamvleggett) would maintain a "plugin" for vue-loader so syntax like:

<template plugin="pug">
  #user
    if user.description
      h2.green Description
      p.description= user.description
    else if authorised
      h2.blue Description
      p.description.
        User has no description,
        why not add one...
    else
      h2.red Description
      p.description User has no description
</template>
<script>
export default {
  data: () => ({
    user: { description: 'foo bar baz' },
    authorised: false
  })
}
</script>

Using pug as actual template language with vue? There is official plugin for pug to jsx which we can use as a starting ground. Is it a valid idea to make vue-loader support "plugins" for templates? If you accept I could do that.

from babel-plugin-transform-vue-jsx.

@nickmessing what prevents you from just using lang="pug"? It already works via pug-loader and you even have v-model with it.

from babel-plugin-transform-vue-jsx.

@yyx990803, yeah, but you can't use pug's conditionals, interpolation and all that stuff, you basically use pug as static to-html thing and then HTML result with vue's template language. Why not use pug as a complete template language instead (as it was designed to be in the first place)?

from babel-plugin-transform-vue-jsx.

@nickmessing well... then you'd have to re-invent everything in Vue's template syntax, or have a weird mix of both. Not sure about that, at least not something I'd be interested in.

from babel-plugin-transform-vue-jsx.

@nickmessing
jade (always like this name) has it's logic syntax and run in compile time ,
and vue also has it's syntax and run in browser runtime,
it is may confusing when we write them both together

from babel-plugin-transform-vue-jsx.

@JsonSong89, I was thinking of attempting to compile jade to render function and use it in <template> in vue-loader, I just like jade as a full template language for runtime

from babel-plugin-transform-vue-jsx.

@nickmessing oh , i get it, you mean write jade like jsx
it may is a huge projects,
jsx is a not only a syntax but also a standard ,
you need do compiler, syntax analyser, ide support .
after all ,it is not normal jade , it can use vue directive .

from babel-plugin-transform-vue-jsx.

Honestly, v-model in JSX would be insanely awesome. I much prefer using JSX to normal templates these days, but can't really commit to it due to the lack of this directive. It is just so practical and pleasant to use.

from babel-plugin-transform-vue-jsx.

Actually, being able to use all built-in and custom directives in JSX would just be crazy good.

from babel-plugin-transform-vue-jsx.

@rhyek, we can do that as community project, but check latest ssr changes, templates are way faster today, for pwa templates are much better

from babel-plugin-transform-vue-jsx.

@nickmessing

we can do that as community project, but check latest ssr changes, templates are way faster today, for pwa templates are much better

Can you be more specific about it? I just wonder how compiled with babel JSX is slower than compiled with loader templates? And there is an added complexity with SSR when using JSX, or I'm missing something?

from babel-plugin-transform-vue-jsx.