vue.jsvuejs2vuelidate

Upgrading from slot-scope to v-slot breaks without errors

I'm trying to upgrade from the old slot-scope syntax to the relatively new v-slot syntax but it doesn't seem to work.

Steps to reproduce the behavior:

  1. Go to the Form.vue file in this codesandbox
  2. To see it working using the old slot-scope syntax, just let the app compile and use the login form (enter some text in both the fields)
  3. Uncomment lines 5, 18, 23, and 36 and comment lines 6, 19, 24, and 37
  4. Use the login form again. The inputs disappear as soon as you start typing.

What am I doing wrong?

Solution

  • your render function in FormGroup.vue returns more than one VNode. Try that:

    render(createElement) {
  return createElement(
    "div",
    this.$scopedSlots.default({
      errors: this.errors,
      invalid: this.invalid,
    })
  );
}