[Vue警告]:无效道具:道具"X"的类型检查失败.预计,得到了String

Question

鉴于此Vue 2组件:

  Vue.component('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,
      };
    },
  });

用法(HAML):

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

一切正常,但我得到所有声明道具的Vue警告:

[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.

我究竟做错了什么？

编辑

我创造了一个很好的小提琴:http://jsfiddle.net/oLt9wkxe/8/

但是在我的应用程序中,此组件嵌套在其他一些组件中.它工作得很好,但显示这些令人讨厌的警告!

Answer 1

您仅在本地版本上看到此警告，因为通过 vue-cli 创建应用程序时安装了 linter。

'{text: some_object.property}' 显然是一个对象 - 有一个键和一个值。

我不知道 HAML 规范，但我强烈怀疑你应该只使用bind: 'some_object.property'.