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

【问题标题】：How to use data object's value of a Component in the template?如何在模板中使用组件的数据对象的值？
【发布时间】：2019-07-24 23:25:09
【问题描述】：

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

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

收到以下错误消息：

[Vue 警告]：渲染错误：“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>

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【问题讨论】：

在html属性中不需要指定“this”。
@Jaybird 没用兄弟！
isAutoComplete() 在哪里？我没有看到它的定义。 Jaybird 是对的。删除
isAutoComplete() 在下面的方法中定义，是的，Jaybird 是对的，我只是告诉他它不起作用。谢谢@SangĐặng

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

config 对象中没有 data，config 对象中也没有 selected。

这是导致您的错误的行

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

【讨论】：

是的，我想通了...但是您的解决方案有效！ :) 谢谢