javascript - 如何在模板中使用组件的数据对象的值？

Question

我是 Vue Js 新手，我被困在这里......

模板未加载。我不知道我犯了什么错误!

收到以下错误消息:

[Vue warn]: Error in render: "TypeError: Cannot read property 'undefined' of 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>

Answer 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'}}