如何将元素从安装的传递到HTML模板

Question

I get some data from api in mounted. I'd like to pass them to html template by the loop, but it is still doesn't work.

HTML

  .date
                .values(v-for="el in document")
                    span {{el.created}}
                    span {{el.document_title}}
                .actions_value
                    .pic
                      i.fas.fa-download
                    span download

VUE.JS

     export default {
      data() {
       return {
         document: {}
        };
     },
     mounted() {
       co.getDocuments(
         this.$store.getters.customer_id,
         this.$store.getters.token
       ).then(data => {
         let dataDoc = data.data;
         console.log(dataDoc);

         Object.values(dataDoc).map(document => {
           return (this.document = document);
        });
       });
      }
    };

My el in the loop doesn't exist.I tried to assign a document to this.document. But still somenthig is wrong.

Answer 1

You cannot access the Vue component reference within the map function by using this keyword. So, I suggest you to bind the Vue component reference instead of the default this operator.

 Object.values(dataDoc).map(
  function(document) {
    this.document = document;
  }.bind(this) **// like this**
);

sample: https://codesandbox.io/s/vue-template-3hmom