reference objects in a vue delaration

Question

I need some help with structure. In my Vue page I have

                 export default { 
    name: 'Member',

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

And in my template section the HTML looks like:

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

If I create code that goes and get the data for the object articles it works fine as long as I create the code inside the export default block. Since the articles can be make up of values I need to have the function run independently and I'll pass in the variables on different button clicks. Such as

          function  getArticles(ID_Values){

          }

instead of duplicating the code for each call. If I create the function outside the block it throws an error saying it does not know what "article" is since it referenced in the function but not declared other than in the default block. I hope that I'm clear I'm new to Vue

Frank · Accepted Answer · 2019-01-05 23:47:43Z

1

Add your function as a method in Vue.

export default { 
    name: 'Member',

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

answered Jan 5, 2019 at 23:47

Frank

1,4142 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bill Over a year ago

Thanks- I was doing this the first time and I went back to it and added this.getArticles and it worked. Thanks for the help Without you helping I would have been on the wrong path for awhile

Collectives™ on Stack Overflow

reference objects in a vue delaration

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related