How to use? TypeError: vm.$options.template.charAt is not a function"

[MichaelJCole]

Hi, this project looks very helpful, but I'm getting an error using it:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "TypeError: vm.$options.template.charAt is not a function"

However, that may be because I have no idea how to use it. Here's what I have so far:

import Vue from "vue";
import cardscriptToQuasar from "@wmfs/cardscript-to-quasar";
import extractDefaults from "@wmfs/cardscript-extract-defaults";

const cardscript = {
  // Some Cardscript:
  $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
  version: "1.0",
  type: "AdaptiveCard",
  body: [
    {
      type: "TextBlock",
      text: "Change me!",
      color: "attention",
      horizontalAlignment: "center"
    }
  ]
};
const options = {
  // Some options:
  fieldLabelWidth: 12,
  imageSourceTemplate: "url(statics/${imagePath})"
};

const cardScriptStepper = Vue.component("card-script-stepper", {
  data: function() {
    return extractDefaults(cardscript);
  },
  template: cardscriptToQuasar(cardscript, options)
});

export default cardScriptStepper;

The goal is to get a server generated form into a Quasar Stepper like this:
https://v1.quasar-framework.org/vue-components/stepper#Example--Vertical

Any suggestions or examples I missed? Thank you!

Michael

[MichaelJCole]

vuejs-templates/webpack#215 (comment)

suggests to use import Vue from "vue/dist/vue.js"; to compile the templates. So, now I'm here:

vue.js?ba4c:634 [Vue warn]: invalid template option:[object Object]

found in

---> <CardScriptStepper>
       <QCardSection>
         <QCard>
           <Root>

and this:

[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'componentInstance' of null"

[meenahoda]

Hey,

Thank you for raising this issue.

This line here:
template: cardscriptToQuasar(cardscript, options)
Could you try this please:
template: cardscriptToQuasar(cardscript, options).template

The converter outputs an object with template on it, so I'm hoping this will help solve your issue.
Let us know how it goes.

Thank you,
Meena

[MichaelJCole]

Hi @meenahoda,

Ok, great! That change rendered the component, but I still got these two warnings in the console:

vue.js?ba4c:634 [Vue warn]: $attrs is readonly.

found in

---> <CardScriptStepper>
       <QCardSection>
         <QCard>
           <Root>

and

vue.js?ba4c:634 [Vue warn]: $listeners is readonly.

found in

---> <CardScriptStepper>
       <QCardSection>
         <QCard>
           <Root>

Any ideas on why that's happening?

Thanks!

[MichaelJCole]

I tried this example cardscript and it didn't render. I got the errors below. Is there a reference implementation I missed?

[Vue warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <CardScriptStepper>
       <QCardSection>
         <QCard>
           <Root>

[Vue warn]: Error in render: "TypeError: Cannot read property 'addressBlock' of undefined"

found in

---> <CardScriptStepper>
       <QCardSection>
         <QCard>
           <Root>

TypeError: Cannot read property 'addressBlock' of undefined
    at Proxy.eval (eval at createFunction (vue.js:NaN), <anonymous>:3:1049)
    at VueComponent.Vue._render (vue.js?ba4c:3545)
    at VueComponent.updateComponent (vue.js?ba4c:4061)
    at Watcher.get (vue.js?ba4c:4472)
    at new Watcher (vue.js?ba4c:4461)
    at mountComponent (vue.js?ba4c:4068)
    at VueComponent.Vue.$mount (vue.js?ba4c:9038)
    at VueComponent.Vue.$mount (vue.js?ba4c:11923)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5972)

This example was similar...

[Vue warn]: Property or method "$v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <CardScriptStepper>
       <QCardSection>
         <QCard>
           <Root>

[Vue warn]: Error in render: "TypeError: Cannot read property 'data' of undefined"

found in

---> <CardScriptStepper>
       <QCardSection>
         <QCard>
           <Root>

TypeError: Cannot read property 'data' of undefined
    at Proxy.eval (eval at createFunction (vue.js:NaN), <anonymous>:3:681)
    at VueComponent.Vue._render (vue.js?ba4c:3545)
    at VueComponent.updateComponent (vue.js?ba4c:4061)
    at Watcher.get (vue.js?ba4c:4472)
    at new Watcher (vue.js?ba4c:4461)
    at mountComponent (vue.js?ba4c:4068)
    at VueComponent.Vue.$mount (vue.js?ba4c:9038)
    at VueComponent.Vue.$mount (vue.js?ba4c:11923)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5972)

Both have the $attrs and $listener errors above. I feel like I'm missing something...

[meenahoda]

Hi there,

I apologise the examples/test aren't as helpful as they could be.
I was successful at replicating your issues, so I worked from there and created a component wrapper which I hope should help:
https://github.com/wmfs/cardscript-component
There is an example in the readme to show how it works.

Basically, the issues were caused because there were a few more 'processing' steps required for the cardscript component (extracting lists/table of contents/validations etc.) so it made sense to me to bundle this altogether so you can just require this component and pass in some cardscript json.

As you will see in the readme example:

<cardscript
      :cardscript="example"
      @Submit="onSubmit"
      @Cancel="onCancel"
      @PushCard="onPushCard"
      @InputAddress="onAddress"
      @InputApiLookupParamsChanged="onInputApiLookupParamsChanged"
      @InputApiLookupNext="onInputApiLookupNext"
    />

:cardscript="example" will be the cardscript json and the rest are events, so you can handle those however you like which is why the methods in the example are left empty.

I hope this helps!
If you have any questions, please let me know.

Thank you,
Meena

Just an added note, when using this component, I am currently getting the warning:
[Vue warn]: Failed to mount component: template or render function not defined.
But I am looking into that, it renders the cardscript besides that though.

[MichaelJCole]

Hi @meenahoda I checked out the component and it looks like you've put a bunch of work into this project! The component has a bunch of imports and dependencies unrelated to my project, so I think for now I'm going to pass and hand-code it. It's a cool project and I'll star it to get updates. Thanks!