問題描述

寫了一個select組件，具體在業務中使用需要修改下，在繼承select的基礎上做了修改，重新命名為teble-select, vue提示 [Vue warn]: Error in render function: 'TypeError: Cannot read property ’name’ of undefined' 這是啥原因，是我select組件寫的有問題導致的嗎? 請教下同志們select組件：

<template> <p ref='element' : :readonly='readonly' v-if='visible' : @click='toggle()'> <p : :disabled='disabled'><span>{{selected.name}}</span> </p> <p : v-if='open'><ul :class='$style.listview'> <li : v-for='(item,index) in options' :disabled='item.disabled' :pider='item.pider' :role='(index === selectedIndex) ? ’z-sel’:’’' @click='select($event,index)'>{{item.name}}</li></ul> </p></p></template><script> const Select = Base.extend({ name: ’u-select’, props: {options: Array,readonly: Boolean,disabled: Boolean,visible: { type: Boolean, default: true },width: { type: [String, Number], default: ’160’ },value: [String, Number], }, data() {return { open: false, selectedIndex: this.initSelectedIndex(this.value),}; }, created() {EventUtil.addHandler(document, ’click’, this.fadeOut.bind(this)); }, computed: {selected() { return this.options[this.selectedIndex];}, }, methods: {toggle(value) { if (this.disabled)return; if (value)this.open = value; elsethis.open = !this.open;},select(event, index) { if (this.readonly)return; if (this.options[index].disabled || this.options[index].pider) {event.stopPropagation();return false; } // this.selected = this.options[index]; this.selectedIndex = index; /** * @event select 選中列表項時觸發 * @property {object} sender 事件發送對象 * @property {object} selected 選中后的列表對象 * @property {String} value 選中后的列表對象的值 */ this.$emit(’select’, {sender: this,selected: this.options[index],value: this.options[index].value, });},initSelectedIndex(value) { let selIndex = 0; if (this.value) {this.options.some((item, index) => { if (item.value === value) {selIndex = index;return true; } return false;}); } return selIndex;},fadeOut(event) { Select.opens.forEach((item, index) => {// 這個地方不能用stopPropagation來處理，因為展開一個Select的同時要收起其他Selectconst element = item.$refs.element;let element2 = event.target;while (element2) { if (element === element2)return; element2 = element2.parentElement;}item.toggle(false); });}, }, watch: {open(newValue) { const index = Select.opens.indexOf(this); if (newValue && index < 0)Select.opens.push(this); else if (!newValue && index > -1)Select.opens.splice(index, 1);},/** * @event change 選中列表項改變時觸發 * @property {object} sender 事件發送對象 * @property {object} selected 改變后的列表對象 * @property {String} value 改變后的列表對象的值 */selected(newValue) { this.$emit(’change’, {sender: this,selected: newValue,value: newValue.value, });},value(newValue) { this.selectedIndex = this.initSelectedIndex(newValue);}, },});//Select 類的靜態屬性 用來保存當前處于open狀態的Select對象Select.opens = [];export default Select;</script>組件是可以正常使用的，但是重新包裝下 就會提示name undefined ??

問題解答

options 有可能為空嗎？如果有可能為空，那么 selected 有可能是 undefined

如果涉及到異步，在這個組件模板根元素上加 v-if='options.length !== 0'