Vue 声明中的引用对象

Question

我需要一些关于结构的帮助。在我的 Vue 页面中，我有

                 export default { 
    name: 'Member',

    data() {
        return {
                modalImport: false,
                articles: {},
                index: 0                  
        }
    },        
    mounted() {
            } ,

在我的模板部分，HTML 看起来像：

                  <div class="col-sm-9">
                        {{index+1}}.
                        <span :id="'status_'+article.uid" class="auto-new"></span>
                        <span :id="'details_' + article.uid">
                            <template v-if="article.authors">{{(article.authors.map(a=>a.name)).join(',')}}.</template>
                            <a v-if="article.title" :href="'https://www.ncbi.nlm.nih.gov/pubmed/'+article.uid" target='_blank'>{{article.title}}</a>
                            <template v-if="article.source">{{article.source}}. </template>

                        </span>
                    </div>

如果我创建代码并获取对象文章的数据，只要我在导出默认块内创建代码，它就可以正常工作。由于文章可以由值组成，我需要让函数独立运行，并且我将在不同的按钮单击时传递变量。比如

          function  getArticles(ID_Values){

          }

而不是为每个调用复制代码。如果我在块之外创建函数，它会抛出一个错误，说它不知道“文章”是什么，因为它在函数中引用但在默认块之外没有声明。我希望我很清楚我是 Vue 的新手

Answer 1

在 Vue 中将您的函数添加为 method。

export default { 
    name: 'Member',

    data() {
        return {
                modalImport: false,
                articles: {},
                index: 0                  
        }
    }, 
    methods: {
       getArticles(ID_Values) {
        //reference to articles as this.articles
       }
    }
}