[Vue 警告]：无效的道具：道具“X”的类型检查失败。预期，得到字符串答案

【问题标题】：[Vue warn]: Invalid prop: type check failed for prop "X". Expected , got String[Vue 警告]：无效的道具：道具“X”的类型检查失败。预期，得到字符串
【发布时间】：2017-07-10 23:42:42
【问题描述】：

鉴于这个 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/

不过，在我的应用程序中，这个组件嵌套在其他几个组件中。它工作得很好，但显示了这些令人讨厌的警告！

【问题讨论】：

嗨！你想通了吗？编辑：在我的模板中我忘了绑定属性：必须写:prop="true" 而不仅仅是prop="true"。
@Ehvince 我已经在使用 Vue 绑定，但仍然出现这些错误。最后，我只是从我的组件中删除了类型检查。
以上所有信息让我相信某处存在编译错误（HAML 问题？过时的 VueJS？）。如果示例 jsfiddle 没有警告但您的应用显示警告，则需要更多信息。我建议使用 jsfiddle（简单）示例并在您的开发环境中尝试一下，看看是否出现警告。

标签： javascript haml vuejs2 vue-component

【解决方案1】：

这个属性会发送一个字符串

myBoolValue=false

这个属性会发送一个boolean

:myBoolValue="false"

这是强制类型和引发异常

props: { myBoolValue: Boolean }

这不会抱怨，但你会得到一个字符串而不是布尔值

props: [ "myBoolValue" ]

我的所有代码都作为推荐示例：

const MyTable = Vue.component("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
/>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我没有使用 vue-cli，bind: '{text: some_object.property}' 是 Vue 支持的有效语法，所以我希望它可以工作（就像它在其他任何地方一样）
@jesal 是的，它是一个有效的对象语法，但在您的代码中有：'text': String。那么我的cli-guess是错误的。它必须是开发模式，而小提琴可能是使用的生产版本。
这是一个很好的猜测，但开发版本的行为方式相同。我放弃了：/