我有一张照片，需要在加载页面之前更改图像的SRC。
示例：
images: [
{ name: 'Car', image: require('../assets/car.png') },
{ name: 'Book', image: require('../assets/book.png') },
]
还有我的模板代码：
<div v-for="(item, index) in images" :key=index>
<div v-if="item.name=="selectedItem"
<img :src="item.image" width="100px" height="auto">
</div>
</div>
脚本代码：
created() {
switch (selectedItem){
case 'car':
Change SRC to ../assets/car.png
break;
case 'book':
Change SRC to ../assets/book.png
break;
}
我该怎么做？
当我尝试此操作时，我在渲染器上获取了selectedItem未定义
答案 0 :(得分：0)
您应该使用一个函数来返回想要的内容。像这样：
<div v-for="(image, index) in images" :key=index>
<div v-if="selectedSrc.length"
<img :src="getSelectedSrc(image.name)" width="100px" height="auto">
</div>
</div>
请注意，在这种情况下，检查selectedSrc的长度是无关紧要的，因为您正在数组中运行循环，该循环将始终具有已过滤的结果。
在Vue声明内：
data() {
return {
images: [
{ name: 'Car', image: '../assets/car.png' },
{ name: 'Book', image: '../assets/book.png' },
],
selectedSrc: [],
};
},
methods: {
getSelectedSrc(name) {
this.selectedSrc = this.images.filter(item => item.name === name);
return this.selectedSrc[0].image;
},
}
如果在过滤的selectedSrc数组中有多个结果，则只会得到第一个结果。考虑到图像数组不是动态数组，它应该可以正常工作。
答案 1 :(得分：0)
在Vue style guide中，必须避免将test.cpp:15:6: note: template argument deduction/substitution failed:
test.cpp:21:23: error: could not convert template argument ‘&Base::a’ from ‘double Base::*’ to ‘double Derived::*’
print<&Derived::a>(d);
与ALTER PROCEDURE [Shipping].[UpdateShippingStatus_ERICA]
@OrderID int = ''
AS
BEGIN
declare @ShipStatus int
declare @TagsVerified varchar(4)
declare @TagCount int
declare @Cash Varchar(15)
declare @Payment int
declare @VehicleType varchar(5)
declare @LoadedUnits int
declare @LoadedWeight int
declare @Shipped Varchar(1)
declare @OHOSTS Varchar(1)
declare @LoadDate int
select @TagCount = count(TGTAGID) from [IBM].[S10F8DCP].SALFIL.TAGCUR where TGORDER = @OrderID
select @LoadDate = Y6LDDATE, @TagsVerified = Y6PRS09, @VehicleType = Y6CAR, @LoadedUnits = Y6PRS09, @LoadedWeight = Y6WGROSS
from [IBM].[S10F8DCP].SALFIL.SORDHAD where Y6ONO = @OrderID
select @OHOSTS = OHOSTS, @Shipped = OHSHIP, @Cash = OHOCSH, @Payment = OHCASH from [IBM].[S10F8DCP].SALFIL.SORDH a where OHONO = @OrderID
Select @ShipStatus =
(Case
When @Shipped = 'S' and OHOSTS = 'C' Then 7
When @Shipped = 'S' and OHOSTS = 'O' Then 6
When @Cash = 'N' and @TagsVerified like '%Y%' and @TagCount = (select a.TagsLoaded from sales.IBM.OrdersShipping a where a.OrderID = @OrderID)
Then 4
When @Cash = 'Y' and @Payment > '0' and @TagsVerified like '%Y%' and @TagCount = (select a.TagsLoaded from sales.IBM.OrdersShipping a where a.OrderID = '35632')
Then 4
When @LoadedUnits > '0' and @LoadedWeight > '0'
Then 3
When @VehicleType = 'VAN' and exists(select * from [IBM].[S10F8DCP].SALFIL.TRINSP where Y7ONO = @OrderID)
Then 2
When @LoadDate > '0' and @VehicleType <> 'VAN'
Then 2
When @LoadDate > '0' and @VehicleType = 'VAN'
Then 1
Else 5
End)
FROM sales.IBM.OrdersShipping a
join [IBM].[S10F8DCP].SALFIL.SORDHAD b on b.Y6ONO = a.OrderId
join [IBM].[S10F8DCP].SALFIL.SORDH c on c.OHONO = b.Y6ONO
join [IBM].[S10F8DCP].SALFIL.TAGCUR d on d.TGORDER = c.OHONO
Update sales.ibm.ordersshipping
set sales.ibm.ordersshipping.ShippingStatus =
(Case
When @ShipStatus = 1 Then 'READYINSP'
When @ShipStatus = 2 Then 'READYLOAD'
When @ShipStatus = 3 Then 'READYSCAN'
When @ShipStatus = 4 Then 'READYSHIP'
When @ShipStatus = 5 Then 'NOTARRIVED'
When @ShipStatus = 6 Then 'SHIPPED'
When @ShipStatus = 7 Then 'COMPLETE'
END)
where OrderID = @OrderID
END
GO
一起使用。
可以通过使用v-if属性对数据进行预过滤来重构上面的代码，使v-for用于纯粹显示数据。我猜computed是作为template传递的？这是代码：
selectedItem