Как использовать значение объекта данных компонента в шаблоне?

Question

Я новичок в Vue Js и застрял здесь ...

Шаблон не загружается.Я не знаю, какую ошибку я допустил!

Получение следующего сообщения об ошибке:

[Vue warn]: Ошибка при рендеринге: «Ошибка типа: Не удается прочитать свойство» 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'}}