1

I have the following HTML VueJS code sample:

<div v-for="site in topSites" ref="ts"><a :href="site.url">
   ...
</div>

Update:

the full div code:

<div v-for="site in topSites" class="col text-center topSites resBoo" ref="ts"><a :href="site.url"><img :src="site.favicon ? site.favicon : app.noFavicon" :alt="site.title" />
        <br>
          <span>{{site.title ? site.title : site.url | trim(16)}}</span>
        </a>
        </div>

JS

function getTopSites(ops){
  var gettingTopSites = browser.topSites.get({ includeFavicon: true, newtab: true, limit: Number(ops.maxTopSitesNum) });
  gettingTopSites.then((ops) => {
    app.topSites = ops;
  })
}

function getOptions(opsKeys){
  var gettingItems = browser.storage.sync.get(Object.keys(defOptions));
  gettingItems.then((res) => {
  stylerOut(res)  
  gSearchEngines(res)
  getTopSites(res)  
});

}


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    topSites: [],
    noFavicon: 'data:image/png;base64,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',
    searchEngines: [],
    selectedSearch: undefined,
    searchQuery: undefined,
    defaultSearch: undefined,
    recentBookmarks: undefined,
    recentVisited: undefined
  },

  methods: {
    doSearch(event) {
      var id = null;
      browser.tabs.getCurrent().then((res) => {
        id = res.id;
        browser.search.search({
          query: this.searchQuery,
          engine: this.selectedSearch,
          tabId: id
        });

      })
      
    }
  },
 /* created: function(){
   //this.$refs.ts.forEach(el => el.style.backgroundColor='blue')
    getOptions(Object.keys(defOptions));
    //console.log(this.$refs)//['topSites'].forEach(el => el.style.backgroundColor = '#fc00fc')
    //stylerIn('',this)  
    console.log(this.$refs['ts'])  
  },*/
  mounted: function() {
    getOptions(Object.keys(defOptions));
    console.log(this.$refs['ts'],'jjj')
  }
  

})

I have tried to checkout the output of console.log(this.$refs) in both mounted and created hooks:

mounted: function() {
    console.log(this.$refs);
 }

Unfortunately, the log output is very strange, it returns Object { } but it is expandable to be looked like:

{}
​
ts: Array(16) [ div.col.text-center.topSites.resBoo, div.col.text-center.topSites.resBoo, div.col.text-center.topSites.resBoo
, … ]
​
<prototype>: Object { … }

enter image description here

I don't know, why do this happen and how to fix it?

15
  • This is absolutely correct. The $refs is an object contains all components with a ref attribute where a key in this object will be a value that is indicated in a ref and a value will be a component or an array of components (in case of v-for) itself/themselves. Commented Apr 12, 2020 at 20:57
  • @Anatoly Both this.$refs.ts and this.$refs['ts'] return undefined! Commented Apr 12, 2020 at 21:08
  • You should look at this.$refs in the mounted hook or later. Commented Apr 12, 2020 at 21:11
  • I have the two hooks in the same Vue object and I'm trying this.$refs.ts in both of them but they are undefined too. Commented Apr 12, 2020 at 21:15
  • If topSites is a prop that is passed from outside of this component in is populated asynchronously then you cannot look this.$refs.ts in the mounted hook it's too early. Commented Apr 12, 2020 at 21:19

1 Answer 1

4

According to the official docs :

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

Also in official docs they say $refs are only populated after the component has been rendered, so they cannot be accessed in the created hook since the DOM has not be rendered yet, you could access them in mounted hook.

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

3 Comments

Both this.$refs.ts and this.$refs['ts'] return undefined!
you're getting this in the created hook?
in official docs they say $refs are only populated after the component has been rendered, so they cannot be accessed in the created hook since the DOM has not rendered yet, you could access them in mounted hook

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.