A jQCloud inspired tag-cloud for Vuejs
License: MIT License
A tag cloud (aka word cloud) component for Vue!
npm install vue-tag-cloud --save
import VueTagCloud from "vue-tag-cloud";
new Vue({
el: "#app",
components: {
VueTagCloud
}
});<VueTagCloud v-bind:data="tagData"></VueTagCloud>Licensed under the MIT License and maintained by Nobal
This is how the component is inserted
and I get this result. What am I doing wrong.
I'm getting errors regarding missing functions draw and click when trying to get the below code to work. Any clue about whats wrong?
<template>
<div class="hello">
<VueTagCloud v-bind:data="tagData"></VueTagCloud>
</div>
</template>
<script>
import VueTagCloud from 'vue-tag-cloud'
export default {
name: 'HelloWorld',
data () {
return {
tagData: []
}
},
created: () => {
this.tagData = [
{'text': 'linux', 'weight': 3},
{'text': 'java', 'weight': 5},
{'text': 'javascript', 'weight': 6}
]
},
components: {
VueTagCloud
}
}
</script>
The error message as reported in the browser console.
vue.esm.js?efeb:591 [Vue warn]: Property or method "draw" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <VueTagCloud> at node_modules/vue-tag-cloud/VueTagCloud.vue
<HelloWorld> at src/components/HelloWorld.vue
<App> at src/App.vue
<Root>
warn @ vue.esm.js?efeb:591
warnNonPresent @ vue.esm.js?efeb:1899
get @ vue.esm.js?efeb:1941
render @ VueTagCloud.vue?4c90:8
Vue._render @ vue.esm.js?efeb:4544
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
createChildren @ vue.esm.js?efeb:5682
createElm @ vue.esm.js?efeb:5584
patch @ vue.esm.js?efeb:6091
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
patch @ vue.esm.js?efeb:6130
Vue._update @ vue.esm.js?efeb:2660
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
Vue._init @ vue.esm.js?efeb:4640
Vue @ vue.esm.js?efeb:4729
(anonymous) @ main.js?1c90:10
./src/main.js @ app.js:1099
__webpack_require__ @ app.js:679
fn @ app.js:89
0 @ app.js:1116
__webpack_require__ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:591 [Vue warn]: Invalid handler for event "click": got undefined
found in
---> <VueTagCloud> at node_modules/vue-tag-cloud/VueTagCloud.vue
<HelloWorld> at src/components/HelloWorld.vue
<App> at src/App.vue
<Root>
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.