У меня есть следующий HTML VueJS пример кода:
<div v-for="site in topSites" ref="ts"><a :href="site.url">
...
</div>
Обновление:
полный код div:
<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')
}
})
Я попытался проверить вывод console.log(this.$refs)
в обоих mounted
и created
хуках:
mounted: function() {
console.log(this.$refs);
}
К сожалению, вывод журнала очень странный, это возвращает Object { }
, но его можно расширять, чтобы он выглядел как:
{}
ts: Array(16) [ div.col.text-center.topSites.resBoo, div.col.text-center.topSites.resBoo, div.col.text-center.topSites.resBoo
, … ]
<prototype>: Object { … }
Я не знаю, почему это происходит и как это исправить?