问题描述
我是Vue Js的新手，我被困在这里...
模板未加载。 我不知道我犯了什么错误！
得到以下错误信息：
[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'undefined'”
<template> <div v-if= "this.config.ignoreheader == false"> <div v-if= "this.config.emptyinput == true"> <input type="text" :id = "this.config.id ? this.config.id : ''" data-auto-input :placeholder = "this.config.placeholder" class='siq-input' autofocus> <p class='italic-text' dropdown-input></p> </div> <div v-else> <div class="drpdwn-input" :class= '[isAutoComplete() ? "autofill" : "", this.config.noShadow ? "noShadow" : ""]' data-header> <em v-if= "this.config.searchicon" class="fsiq-search"></em> <em v-if= "this.config.showarr" class="fsiq-darrow"></em> <input type="text" :id = "this.config.id ? this.config.id : ''" data-auto-input :placeholder = "this.config.placeholder" :value = "this.config.selectedkey"> <div class="drpdwn-label" dropdown-label>{{this.config.data[this.config.selected] || 'Choose a list'}}</div> </div> </div> </div> </template> <script> export default { name: "Atom", props: { dataObj: { type: Array, required: true, default: () => [] }, options:{ } }, data: function() { return { config: { type : "autocomplete",//No I18N searchicon: true, showarrow : true, emptyinput: false, placeholder : "Search",//No I18N noMatchesText : "Search Not Found!",//No I18N ignoreheader : false, dataonly : true, selectedkey : '' } }; }, } </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
1楼
没有data在您的config对象，也没有selected你的config对象。
这是导致您出错的行
<div class="drpdwn-label" dropdown-label>{{this.config.data[this.config.selected] || 'Choose a list'}}</div>
您可能想要执行以下操作：
{{ (this.config.data && this.config.selected) ? this.config.data[this.config.selected] : 'Choose a list'}}