Uncaught TypeError: t.toLowerCase is not a function

adammoroff commented 5 years ago

Hi @fritx I was wondering if you could help me. Im using vue-at 2.x and when entering the '@' symbol I get the following error message:

Uncaught TypeError: t.toLowerCase is not a function at default (vue-at.js?a1f5:1) at eval (vue-at.js?a1f5:1) at Array.filter () at VueComponent.handleInput (vue-at.js?a1f5:1) at input (vue-at.js?a1f5:1) at invoker (vue.runtime.esm.js?2b0e:2023) at HTMLDivElement.fn._withTask.fn._withTask (vue.runtime.esm.js?2b0e:1822)

HTML

<at :members="members" v-model="comment" :name-key="name">
         <template slot="item" slot-scope="s">  
            <img :src="s.item.avatar">
            <span v-text="s.item.name"></span>
         </template>
            <div class="editor" contenteditable v-html="html"></div>
    </at>

JS:

export default {
    data() {
      return {
        members: [{
          avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
          name: 'myrtie.green'
        }, {
          avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
          name: 'bob'
        }],
        html: '',
        comment: ''
      }
    }
}

adammoroff commented 5 years ago

Resolved.

rico-c commented 5 years ago

这个问题的源码是这样的

filterMatch: {
      type: Function,
      default: (name, chunk, at) => {
        // match at lower-case
        return name.toLowerCase()
          .indexOf(chunk.toLowerCase()) > -1
      }
    }

也就是读不到name值，是因为这个方式直接去读了members数组的子元素作为name值，但是这里给的member数组的子元素是一个对象，所以会报错。解决方案是输出memvers: ['wamoumou','zhangsan','lisi']这样的格式

fritx commented 5 years ago

filterMatch 这个prop给的默认函数确实是直接用name比对哈：

https://github.com/fritx/vue-at/blob/eae5f4cafdcb0f8c17c606b435527e49e4109d2a/src/At.vue#L321-L324

https://github.com/fritx/vue-at/blob/eae5f4cafdcb0f8c17c606b435527e49e4109d2a/src/AtTextarea.vue#L92-L95

但比对之前，name 都是经过 itemName() 转换过的，兼容了 members 为对象数组和字符串数组这两种情况，（如果是对象数组，需要同时提供 nameKey 这个prop）：

https://github.com/fritx/vue-at/blob/eae5f4cafdcb0f8c17c606b435527e49e4109d2a/src/At.vue#L146-L149

fritx / vue-at

Uncaught TypeError: t.toLowerCase is not a function #76

HTML

JS: