I try get data from my API server with axios
but i get this error:
'v-bind' directives require an attribute value.
I dont know how i must use v-bind
to fix it.
Here is my code :
<template>
<div class="main">
<p class="title"><span>Fetured Items</span><br>
<span>Shop for items based on what we featured in this week</span></p>
<div v-if="products && products.length" class="content">
<content-item v-for="product in products" :key="product.id"
v-bind:name="product.name"
v-bind:price="product.price"
v-bind:srcToProdImage= 'localhost:8081/' + product.productImage></content-item>
</div>
<p class="cont-btn">
<button class="btn">Browse All Product <span><i class="fas fa-arrow-right"></i></span></button>
</p>
</div>
</template>
<script>
import Content_item from './Content-item';
import axios from 'axios';
export default {
data:{
products,
errors
},
created(){
axios.get('localhost:8081/products')
.then((result) => {
this.products = result.data.products
}).catch((err) => {
this.errors.push(err)
});
},
components: {
'content-item' : Content_item
}
}
</script>
<style lang="scss" scoped>
.content{
display: flex;
flex-wrap: wrap;
margin-left: 150px;
margin-right: 150px;
justify-content: space-between;
}
.title{
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
span:first-child{
font-family: 'Lato', sans-serif;
font-weight: 800;
color: #222222;
font-size: 30px;
}
span:last-child{
font-family: 'Lato', sans-serif;
font-weight: 400;
color: #9f9f9f;
font-size: 14px;
}
}
.cont-btn{
display: flex;
justify-content: center;
}
.btn{
padding: 18px 24px 18px 24px;
background-color: #f16d7f;
font-family: 'Lato', sans-serif;
font-weight: 800;
border: none;
outline: none;
color: #ffffff;
}
</style>
v-bind:srcToProdImage= 'localhost:8081/' + product.productImage
is invalid.