Given this Vue 2 ponent:

  Vueponent('read-more', {
    props: {
      'text': String,
      'clamp': {
        type: String,
        default: 'Read More'
      },
      'less': {
        type: String,
        default: 'Read Less'
      },
      'length': {
        type: Number,
        default: 100
      }
    },
    template: `
    <p>
      <span v-if="!show">{{truncate(text)}} <a href="javascript:;" v-if="text.length >= length" @click="toggle()">{{clamp}}</a></span>
      <span v-if="show">{{text}} <a href="javascript:;" @click="toggle()" v-if="text.length >= length">{{less}}</a></span>
    </p>
    `,
    methods: {
      truncate(string) {
        if (string) {
          return string.toString().substring(0, this.length);
        }

        return '';
      },
      toggle() {
        this.show = !this.show;
      },
    },
    data() {
      return {
        show: false,
        counter: this.length,
      };
    },
  });

Usage (HAML):

%read-more{v: {bind: '{text: some_object.property}' }}

Everything works fine but I get Vue warnings for all the declared props:

[Vue warn]: Invalid prop: type check failed for prop "text". Expected , got String.

[Vue warn]: Invalid prop: type check failed for prop "clamp". Expected , got String.

[Vue warn]: Invalid prop: type check failed for prop "less". Expected , got String.

[Vue warn]: Invalid prop: type check failed for prop "length". Expected , got Number.

What am I doing wrong?

EDIT

I've created a fiddle which works just fine: /

In my app though, this ponent is nested within a few other ponents. It works perfectly fine but shows these warnings which are annoying!

Given this Vue 2 ponent:

  Vue.ponent('read-more', {
    props: {
      'text': String,
      'clamp': {
        type: String,
        default: 'Read More'
      },
      'less': {
        type: String,
        default: 'Read Less'
      },
      'length': {
        type: Number,
        default: 100
      }
    },
    template: `
    <p>
      <span v-if="!show">{{truncate(text)}} <a href="javascript:;" v-if="text.length >= length" @click="toggle()">{{clamp}}</a></span>
      <span v-if="show">{{text}} <a href="javascript:;" @click="toggle()" v-if="text.length >= length">{{less}}</a></span>
    </p>
    `,
    methods: {
      truncate(string) {
        if (string) {
          return string.toString().substring(0, this.length);
        }

        return '';
      },
      toggle() {
        this.show = !this.show;
      },
    },
    data() {
      return {
        show: false,
        counter: this.length,
      };
    },
  });

Usage (HAML):

%read-more{v: {bind: '{text: some_object.property}' }}

Everything works fine but I get Vue warnings for all the declared props:

[Vue warn]: Invalid prop: type check failed for prop "text". Expected , got String.

[Vue warn]: Invalid prop: type check failed for prop "clamp". Expected , got String.

[Vue warn]: Invalid prop: type check failed for prop "less". Expected , got String.

[Vue warn]: Invalid prop: type check failed for prop "length". Expected , got Number.

What am I doing wrong?

EDIT

I've created a fiddle which works just fine: http://jsfiddle/oLt9wkxe/8/

In my app though, this ponent is nested within a few other ponents. It works perfectly fine but shows these warnings which are annoying!

• javascript
• haml
• vuejs2
• vue-ponent

Share Improve this question Follow edited Jul 11, 2017 at 18:33 jesal asked Jul 10, 2017 at 23:42 jesaljesal 7,96866 gold badges5252 silver badges5656 bronze badges 3

• Hi ! Did you figure this out ? edit: in my template I forgot to bind on the property: have to write :prop="true" instead of just prop="true". – Ehvince Commented Dec 5, 2017 at 18:29
• @Ehvince I was already using Vue bindings but still got those errors. In the end, I just ended up removing type checks from my ponent. – jesal Commented Dec 5, 2017 at 19:09
• All the info above leads me to believe there's a pilation error somewhere (HAML issue? outdated VueJS?). More info will be needed if the example jsfiddle works without warnings but your app shows warnings. I would remend taking the jsfiddle (simple) example and trying it out in your development environment to see if the warnings show up. – Vince Commented Jan 2, 2018 at 21:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

This attribute will send a string

myBoolValue=false

This attribute will send a boolean

:myBoolValue="false"

This is forcing the type and raise exception

props: { myBoolValue: Boolean }

This won't plain but you will get a string instead of the boolean value

props: [ "myBoolValue" ]

All my code as reanded example:

const MyTable = Vue.ponent("my-table", {
props: {
  myBoolValue: Boolean // Force type
  myStringValue: String,
  myObject: Object
},

<my-table
  ref="otbExpertTable_user"
  :myBoolValue="false"
  v-bind:is-mobile="isMobile"
  v-on:hover-item="hoverItem"
  :myObject=metaUsers
/>

You see this warning only on your local version because of the linter which is installed when you create your app via vue-cli.

'{text: some_object.property}' is obviously an object - there is a key and a value.

I don't know HAML specification but I strongly suspect that you should just use bind: 'some_object.property'.