How to define data in Html with Vue.js?
up vote
-1
down vote
favorite
I use pseudo-data(fake data) in html to test the function, but how to define the data in vue.js? I would like to get data(not json) from back-end python app, I don't know how to define and replace those pseudo-data with real data, thank you so much for any advice and help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Desktop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" scoped>
.drag-box{
display: flex;
user-select: none;
/*width: 980px;*/
}
.drag-box-item {
flex: 1;
/*width: 200px;*/
/*min-width: 300px;*/
background-color: #eff1f5;
margin-right: 16px;
border-radius: 6px;
border: 1px #e1e4e8 solid;
}
.item-title{
padding: 8px 8px 8px 12px;
font-size: 18px;
font-weight: bolder;
line-height: 1.5;
color: #24292e;
font-weight: 600;
}
.item-ul {
padding: 0 20px;
height: 500px;
overflow-y: scroll;
}
.item-ul::-webkit-scrollbar{
width: 0;
}
.drag-list {
display: inline-block;
border: 1px #e1e4e8 solid;
padding: 10px;
margin: 5px;
list-style: none;
background-color: #fff;
border-radius: 6px;
cursor: pointer;
-webkit-transition: border .3s ease-in;
transition: border .1s ease-in;
}
.drag-list:hover {
border: 1px solid #20a0ff;
}
.icon {
overflow:hidden;
}
.drag-title {
font-weight: 400;
line-height: 25px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
.ghost-style{
display: block;
color: transparent;
border-style: dashed
}
</style>
</head>
<body>
<div id="app">
<section class="main">
<div class="crumbs">
<div style="font-size: 18px;font-weight: border; padding-bottom:12px; text-align: center;">Test</div>
</div>
<div class="container">
<div class="drag-box">
<div class="drag-box-item">
<div class="item-title">all</div>
<draggable v-model="all" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="all" class="item-ul">
<div v-for="(item,index) in all" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">aaa</div>
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="todo" class="item-ul">
<div v-for="(item,index) in todo" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">bbb</div>
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="doing" class="item-ul">
<div v-for="(item,index) in doing" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">ccc</div>
<draggable v-model="done" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="done" class="item-ul">
<div v-for="(item,index) in done" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</div>
</div>
</div>
</section>
</div>
<!-- CDNJS :: Vue (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/Sortable/1.6.0/Sortable.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
dragOptions:{
animation: 120,
scroll: true,
group: 'sortlist',
ghostClass: 'ghost-style'
},
all: [
{
content: '0000'
}
],
todo: [
{
content: '1111'
},
{
content: '2222'
},
{
content: '3333'
}
],
doing: [
{
content: '4444'
},
{
content: '5555'
},
{
content: '6666'
},
{
content: '7777'
}
],
done:[
{
content: '8888'
},
{
content: '9999'
}
]
}
},
components:{
draggable
},
methods: {
removeHandle(event){}
}
});
</script>
</body>
</html>
I use pseudo-data(fake data) in html to test the function, but how to define the data in vue.js? I would like to get data(not json) from back-end python app, I don't know how to define and replace those pseudo-data with real data, thank you so much for any advice and help.
javascript html python-3.x vue.js
asked Nov 20 at 2:49
Begin2Pip
598
add a comment |
up vote
-1
down vote
favorite
I use pseudo-data(fake data) in html to test the function, but how to define the data in vue.js? I would like to get data(not json) from back-end python app, I don't know how to define and replace those pseudo-data with real data, thank you so much for any advice and help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Desktop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" scoped>
.drag-box{
display: flex;
user-select: none;
/*width: 980px;*/
}
.drag-box-item {
flex: 1;
/*width: 200px;*/
/*min-width: 300px;*/
background-color: #eff1f5;
margin-right: 16px;
border-radius: 6px;
border: 1px #e1e4e8 solid;
}
.item-title{
padding: 8px 8px 8px 12px;
font-size: 18px;
font-weight: bolder;
line-height: 1.5;
color: #24292e;
font-weight: 600;
}
.item-ul {
padding: 0 20px;
height: 500px;
overflow-y: scroll;
}
.item-ul::-webkit-scrollbar{
width: 0;
}
.drag-list {
display: inline-block;
border: 1px #e1e4e8 solid;
padding: 10px;
margin: 5px;
list-style: none;
background-color: #fff;
border-radius: 6px;
cursor: pointer;
-webkit-transition: border .3s ease-in;
transition: border .1s ease-in;
}
.drag-list:hover {
border: 1px solid #20a0ff;
}
.icon {
overflow:hidden;
}
.drag-title {
font-weight: 400;
line-height: 25px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
.ghost-style{
display: block;
color: transparent;
border-style: dashed
}
</style>
</head>
<body>
<div id="app">
<section class="main">
<div class="crumbs">
<div style="font-size: 18px;font-weight: border; padding-bottom:12px; text-align: center;">Test</div>
</div>
<div class="container">
<div class="drag-box">
<div class="drag-box-item">
<div class="item-title">all</div>
<draggable v-model="all" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="all" class="item-ul">
<div v-for="(item,index) in all" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">aaa</div>
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="todo" class="item-ul">
<div v-for="(item,index) in todo" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">bbb</div>
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="doing" class="item-ul">
<div v-for="(item,index) in doing" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">ccc</div>
<draggable v-model="done" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="done" class="item-ul">
<div v-for="(item,index) in done" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</div>
</div>
</div>
</section>
</div>
<!-- CDNJS :: Vue (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/Sortable/1.6.0/Sortable.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
dragOptions:{
animation: 120,
scroll: true,
group: 'sortlist',
ghostClass: 'ghost-style'
},
all: [
{
content: '0000'
}
],
todo: [
{
content: '1111'
},
{
content: '2222'
},
{
content: '3333'
}
],
doing: [
{
content: '4444'
},
{
content: '5555'
},
{
content: '6666'
},
{
content: '7777'
}
],
done:[
{
content: '8888'
},
{
content: '9999'
}
]
}
},
components:{
draggable
},
methods: {
removeHandle(event){}
}
});
</script>
</body>
</html>
I use pseudo-data(fake data) in html to test the function, but how to define the data in vue.js? I would like to get data(not json) from back-end python app, I don't know how to define and replace those pseudo-data with real data, thank you so much for any advice and help.
javascript html python-3.x vue.js
asked Nov 20 at 2:49
Begin2Pip
598
If you want to get data from the backend you need to make an HTTP request with something like axios. When the request sends data, add it to your component's data.
– Mark Meyer
Nov 20 at 3:06
They are not json(not api link), can I also use axios to get data?
– Begin2Pip
Nov 20 at 3:09
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I use pseudo-data(fake data) in html to test the function, but how to define the data in vue.js? I would like to get data(not json) from back-end python app, I don't know how to define and replace those pseudo-data with real data, thank you so much for any advice and help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Desktop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" scoped>
.drag-box{
display: flex;
user-select: none;
/*width: 980px;*/
}
.drag-box-item {
flex: 1;
/*width: 200px;*/
/*min-width: 300px;*/
background-color: #eff1f5;
margin-right: 16px;
border-radius: 6px;
border: 1px #e1e4e8 solid;
}
.item-title{
padding: 8px 8px 8px 12px;
font-size: 18px;
font-weight: bolder;
line-height: 1.5;
color: #24292e;
font-weight: 600;
}
.item-ul {
padding: 0 20px;
height: 500px;
overflow-y: scroll;
}
.item-ul::-webkit-scrollbar{
width: 0;
}
.drag-list {
display: inline-block;
border: 1px #e1e4e8 solid;
padding: 10px;
margin: 5px;
list-style: none;
background-color: #fff;
border-radius: 6px;
cursor: pointer;
-webkit-transition: border .3s ease-in;
transition: border .1s ease-in;
}
.drag-list:hover {
border: 1px solid #20a0ff;
}
.icon {
overflow:hidden;
}
.drag-title {
font-weight: 400;
line-height: 25px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
.ghost-style{
display: block;
color: transparent;
border-style: dashed
}
</style>
</head>
<body>
<div id="app">
<section class="main">
<div class="crumbs">
<div style="font-size: 18px;font-weight: border; padding-bottom:12px; text-align: center;">Test</div>
</div>
<div class="container">
<div class="drag-box">
<div class="drag-box-item">
<div class="item-title">all</div>
<draggable v-model="all" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="all" class="item-ul">
<div v-for="(item,index) in all" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">aaa</div>
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="todo" class="item-ul">
<div v-for="(item,index) in todo" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">bbb</div>
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="doing" class="item-ul">
<div v-for="(item,index) in doing" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">ccc</div>
<draggable v-model="done" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="done" class="item-ul">
<div v-for="(item,index) in done" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</div>
</div>
</div>
</section>
</div>
<!-- CDNJS :: Vue (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/Sortable/1.6.0/Sortable.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
dragOptions:{
animation: 120,
scroll: true,
group: 'sortlist',
ghostClass: 'ghost-style'
},
all: [
{
content: '0000'
}
],
todo: [
{
content: '1111'
},
{
content: '2222'
},
{
content: '3333'
}
],
doing: [
{
content: '4444'
},
{
content: '5555'
},
{
content: '6666'
},
{
content: '7777'
}
],
done:[
{
content: '8888'
},
{
content: '9999'
}
]
}
},
components:{
draggable
},
methods: {
removeHandle(event){}
}
});
</script>
</body>
</html>
I use pseudo-data(fake data) in html to test the function, but how to define the data in vue.js? I would like to get data(not json) from back-end python app, I don't know how to define and replace those pseudo-data with real data, thank you so much for any advice and help.
javascript html python-3.x vue.js
asked Nov 20 at 2:49
Begin2Pip
598
I use pseudo-data(fake data) in html to test the function, but how to define the data in vue.js? I would like to get data(not json) from back-end python app, I don't know how to define and replace those pseudo-data with real data, thank you so much for any advice and help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Desktop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" scoped>
.drag-box{
display: flex;
user-select: none;
/*width: 980px;*/
}
.drag-box-item {
flex: 1;
/*width: 200px;*/
/*min-width: 300px;*/
background-color: #eff1f5;
margin-right: 16px;
border-radius: 6px;
border: 1px #e1e4e8 solid;
}
.item-title{
padding: 8px 8px 8px 12px;
font-size: 18px;
font-weight: bolder;
line-height: 1.5;
color: #24292e;
font-weight: 600;
}
.item-ul {
padding: 0 20px;
height: 500px;
overflow-y: scroll;
}
.item-ul::-webkit-scrollbar{
width: 0;
}
.drag-list {
display: inline-block;
border: 1px #e1e4e8 solid;
padding: 10px;
margin: 5px;
list-style: none;
background-color: #fff;
border-radius: 6px;
cursor: pointer;
-webkit-transition: border .3s ease-in;
transition: border .1s ease-in;
}
.drag-list:hover {
border: 1px solid #20a0ff;
}
.icon {
overflow:hidden;
}
.drag-title {
font-weight: 400;
line-height: 25px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
.ghost-style{
display: block;
color: transparent;
border-style: dashed
}
</style>
</head>
<body>
<div id="app">
<section class="main">
<div class="crumbs">
<div style="font-size: 18px;font-weight: border; padding-bottom:12px; text-align: center;">Test</div>
</div>
<div class="container">
<div class="drag-box">
<div class="drag-box-item">
<div class="item-title">all</div>
<draggable v-model="all" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="all" class="item-ul">
<div v-for="(item,index) in all" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">aaa</div>
<draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="todo" class="item-ul">
<div v-for="(item,index) in todo" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">bbb</div>
<draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="doing" class="item-ul">
<div v-for="(item,index) in doing" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</draggable>
</div>
<div class="drag-box-item">
<div class="item-title">ccc</div>
<draggable v-model="done" @remove="removeHandle" :options="dragOptions">
<transition-group tag="div" id="done" class="item-ul">
<div v-for="(item,index) in done" class="drag-list" :key="index">
{{item.content}}
</div>
</transition-group>
</div>
</div>
</div>
</section>
</div>
<!-- CDNJS :: Vue (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/Sortable/1.6.0/Sortable.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script type="text/javascript" src="https://cdn.bootcss.com/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
dragOptions:{
animation: 120,
scroll: true,
group: 'sortlist',
ghostClass: 'ghost-style'
},
all: [
{
content: '0000'
}
],
todo: [
{
content: '1111'
},
{
content: '2222'
},
{
content: '3333'
}
],
doing: [
{
content: '4444'
},
{
content: '5555'
},
{
content: '6666'
},
{
content: '7777'
}
],
done:[
{
content: '8888'
},
{
content: '9999'
}
]
}
},
components:{
draggable
},
methods: {
removeHandle(event){}
}
});
</script>
</body>
</html>
I use pseudo-data(fake data) in html to test the function, but how to define the data in vue.js? I would like to get data(not json) from back-end python app, I don't know how to define and replace those pseudo-data with real data, thank you so much for any advice and help.
javascript html python-3.x vue.js
javascript html python-3.x vue.js
asked Nov 20 at 2:49
Begin2Pip
598
asked Nov 20 at 2:49
Begin2Pip
598
asked Nov 20 at 2:49
Begin2Pip
598
asked Nov 20 at 2:49
Begin2Pip
598
asked Nov 20 at 2:49
Begin2Pip
598
598
If you want to get data from the backend you need to make an HTTP request with something like axios. When the request sends data, add it to your component's data.
– Mark Meyer
Nov 20 at 3:06
They are not json(not api link), can I also use axios to get data?
– Begin2Pip
Nov 20 at 3:09
add a comment |
If you want to get data from the backend you need to make an HTTP request with something like axios. When the request sends data, add it to your component's data.
– Mark Meyer
Nov 20 at 3:06
They are not json(not api link), can I also use axios to get data?
– Begin2Pip
Nov 20 at 3:09
If you want to get data from the backend you need to make an HTTP request with something like axios. When the request sends data, add it to your component's data.
– Mark Meyer
Nov 20 at 3:06
If you want to get data from the backend you need to make an HTTP request with something like axios. When the request sends data, add it to your component's data.
– Mark Meyer
Nov 20 at 3:06
They are not json(not api link), can I also use axios to get data?
– Begin2Pip
Nov 20 at 3:09
They are not json(not api link), can I also use axios to get data?
– Begin2Pip
Nov 20 at 3:09
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
You should either fetch that data, as mentioned in another answer, or make your backend write the data part of the vue script, probably using a template engine, when rendering the page.
answered Nov 20 at 3:34
EderChrono
1847
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You should either fetch that data, as mentioned in another answer, or make your backend write the data part of the vue script, probably using a template engine, when rendering the page.
answered Nov 20 at 3:34
EderChrono
1847
add a comment |
up vote
0
down vote
You should either fetch that data, as mentioned in another answer, or make your backend write the data part of the vue script, probably using a template engine, when rendering the page.
answered Nov 20 at 3:34
EderChrono
1847
add a comment |
up vote
0
down vote
up vote
0
down vote
You should either fetch that data, as mentioned in another answer, or make your backend write the data part of the vue script, probably using a template engine, when rendering the page.
answered Nov 20 at 3:34
EderChrono
1847
You should either fetch that data, as mentioned in another answer, or make your backend write the data part of the vue script, probably using a template engine, when rendering the page.
answered Nov 20 at 3:34
EderChrono
1847
answered Nov 20 at 3:34
EderChrono
1847
answered Nov 20 at 3:34
EderChrono
1847
answered Nov 20 at 3:34
EderChrono
1847
1847
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53385508%2fhow-to-define-data-in-html-with-vue-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you want to get data from the backend you need to make an HTTP request with something like axios. When the request sends data, add it to your component's data.
– Mark Meyer
Nov 20 at 3:06
They are not json(not api link), can I also use axios to get data?
– Begin2Pip
Nov 20 at 3:09