javascript - vue.js 中的 v-bind 错误
问题描述
我尝试从我的 API 服务器获取数据,axios
但出现此错误:
'v-bind' directives require an attribute value.
我不知道我必须如何v-bind
修复它。这是我的代码:
<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>
解决方案
srcToProntImage
只需在您的表达式周围加上双引号:
<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>
推荐阅读
- android - 如何为 PagerSlidingTabStrip 创建单独的背景?
- django - Django 传递上下文
- php - PHP如何在列中找到相同的值
- javascript - /input>>\ 的一部分是说它是“预期对应的 JSX 结束标签”。如何更改它以使其正确?
- python - 将自定义渐变定义为 Tensorflow 中的类方法
- c - 在 C/C++ 中将 int 指针转换为长指针
- c# - 如何将treeView转换为Json?
- php - where 子句中的 MYSQL 别名
- r - 将向量作为时间参数传递给 R 中的 rep
- parsing - 解析来自 AWS SageMaker 的 boto3 invoke_endpoint 响应