1, build the project according to his official API method, and then use the component result page in it to be blank.
the following template is the test template, which is copied directly to the official. Is there a problem with any step
(this is a document link)
<template>
<div class="hello">
<cube-index-list
:data="cityData"
:title="title"
@select="selectItem"
@title-click="clickTitle">
</cube-index-list>
</div>
</template>
<script>
export default {
data() {
return {
title: "Current City: BEIJING",
cityData: [
{
"name": "Hot City",
"items": [
{
"name": "BEIJING",
"value": 1
},
{
"name": "SHANGHAI",
"value": 2
}
]
},
{
"name": "A",
"items": [
{
"name": "ANSHAN",
"value": 3
},
{
"name": "ANQING",
"value": 4
}
]
},
{
"name": "B",
"items": [
{
"name": "BNSHAN",
"value": 5
},
{
"name": "BNQING",
"value": 6
}
]
},
{
"name": "C",
"items": [
{
"name": "CNSHAN",
"value": 7
},
{
"name": "CNQING",
"value": 8
}
]
},
{
"name": "D",
"items": [
{
"name": "DNSHAN",
"value": 9
},
{
"name": "DNQING",
"value": 10
}
]
},
]
}
},
methods: {
selectItem(item) {
console.log(item.name)
},
clickTitle(title) {
console.log(title)
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
=
then use another method to generate a project with this component