javascript - v-for遍历的多个组件切换图片 如何不相互影响？
通过循环出来的 van-collapse tags van-image 相互切换图片 不相互影响
<van-collapse v-model="activeNames"> <template v-for="(item, index) in data"> <van-collapse-item :title="item.title" :name="item.name" icon="stop"> <tags :tagData="item.category" :type="'card'" @change="changeTab" :active="current"></tags> <van-image width="100%" height="auto" :src="yl" /> </van-collapse-item> </template> </van-collapse>数据
data: [ { title: "潜在分布区预测", id: '1', category: [ { name: "鱼卵潜在分布区", src: require('../../assets/images/yl.jpg') }, { name: "仔稚鱼潜在分布区", src: require('../../assets/images/yl2.jpg') }, { name: "寡节甘吻沙蚕潜在分布区", }, { name: "脆壳理蛤潜在分布区", }, { name: "江户明樱蛤潜在分布区", }, { name: "不倒翁虫潜在分布区", }, { name: "绒毛细足蟹潜在分布区", } ] }, { title: " 物种丰度预测", id: '2', category: [ { name: "夜光藻丰度" } ] }, { title: "生物量预测", id: '3', category: [ { name: "各功能组生物量" }, { name: "蓝点马鲛生物量" }, { name: "鳀科生物量" }, { name: "斑鰶生物量" }, { name: "青鳞小沙丁生物量" }, { name: "小黄鱼生物量" }, { name: "蟹类生物量" }, { name: "虾类生物量" }, { name: "口虾蛄生物量" }, { name: "头足类生物量" }, { name: "棘皮动物生物量" }, { name: "软体动物生物量" }, { name: "浮游动物生物量" }, { name: "浮游植物生物量" } ] }, { title: "食物网结构与功能预测", id: '4', category: [ { name: "食物网结构" }, { name: "关键种" }, { name: "能量传递效率" }, { name: "成熟度与稳定性" } ] } ]每个 category 都有一个src的图片
现在这种写法 总是相互影响，要么总是一个图片，要么所有图片都在一个tag下
现在这种写法 总是相互影响，要么总是一个图片，要么所有图片都在一个tag下
共有3个答案
没看到懂:src="yl"，你这个不是动态的获取图片的么？ 个人思路仅参考，有点没看懂:src="yl"
<van-image width="100%" height="auto" :src="yl" />//:src="yl" 不对吧//或者你yl是一个变量通过changeTabchangeTab(v){ //点击哪个tab key值 let tabNum = v //拿到tabNum去你的data中去找主键 let arr = this.data.category arr.forEach((item) => { if(item.id==tabNum){ this.yl=item.src } }}数据结构： category: [ { id:"1", name: "鱼卵潜在分布区", src: require('../../assets/images/yl.jpg') }, { id:"2", name: "仔稚鱼潜在分布区", src: require('../../assets/images/yl2.jpg') }, ]
所以你的 <van-image> 组件中的 src 值为啥是 yl，而不是 item.src ??
Edit 1
所有的 van-image 组件的 src 属性共用 1 个变量了，那你操作了 yl 肯定会影响到所有的使用到 yl 变量的 image 组件。
Edit 2
看你的描述和截图，大概的业务需求是这样的。
循环渲染一个折叠版面 里面有一个自定义的按钮切换Tags组件，每次切换Tag会联动修改这个自定义组件同级的图片展示组件的 src 属性来期望展示不同的预览图。
所以你可以在 data 这个对象数组中的 item 中增加一个 preview 属性。每次切换的时候取去修改对应的 preview 属性，比如说：
<van-collapse v-model="activeNames"> <template v-for="(item, index) in data"> <van-collapse-item :title="item.title" :name="item.name" icon="stop">- <tags :tagData="item.category" :type="'card'" @change="changeTab" :active="current"></tags>+ <tags :tagData="item.category" :type="'card'" :active="current" @change="(url) => changeTab(url, index)" ></tags>- <van-image width="100%" height="auto" :src="yl" />+ <van-image width="100%" height="auto" :src="item.preview" /> </van-collapse-item> </template></van-collapse>export defaut { methods: { changeTab(url, index) { this.$set(this.data[index], 'preview', url) } }}// 数据示例const data = [ { title: "潜在分布区预测", id: '1', preview: '', category: [ ... ] }]当然你也可以换一个思路，既然你的 <tags> 组件都有一个 active 属性了。那么直接就用这个绑定的 current 属性来控制 <van-image> 的 src 属性也可以，但是我看了一下你的 current 变量也是有问题的，修改一个应该全部都会被修改掉。所以稍作修改可以这样来处理：
<van-collapse v-model="activeNames"> <template v-for="(item, index) in data"> <van-collapse-item :title="item.title" :name="item.name" icon="stop">- <tags :tagData="item.category" :type="'card'" @change="changeTab" :active="current"></tags>+ <tags :tagData="item.category" :type="'card'" :active="item.active" @change="(name) => onTagsChange(name, index)" ></tags>- <van-image width="100%" height="auto" :src="yl" />+ <van-image width="100%" height="auto" :src="getPreviewImage(item.category, item.active)" /> </van-collapse-item> </template></van-collapse>export defaut { methods: { onTagsChange(key, index) { this.$set(this.data[index], 'active', key) }, getPreviewImage(list, activeName) { const activeData = list.find(data => data.name === activeName) return activeData.src } }}// 数据示例const data = [ { title: "潜在分布区预测", id: '1', active: '鱼卵潜在分布区', category: [ ... ] }]
看起来你希望在循环中为每个组件生成独立的图片，而不是多个组件共享一个图片。根据你提供的代码，问题可能在于你没有为每个组件生成唯一的图片 URL。
在你的代码中，你使用了 require('../../assets/images/yl.jpg') 来获取图片。这种方式在 Node.js 环境中是可以的，但在客户端渲染的环境中可能不会工作，因为同样的 URL 可能已经被其他组件使用。
一个解决方案是为每个 item 生成一个唯一的 src URL。例如，你可以使用 item.id 或 item.name 来生成 URL。
例如：
{ title: "潜在分布区预测", id: '1', category: [ { name: "鱼卵潜在分布区", src: require(`../../assets/images/yl${item.id}.jpg`) }, ... ]}在这个例子中，每个 item 的 src 都会添加 item.id 后缀，这样就可以确保每个 item 都有自己独立的图片 URL。
-
问题内容： 我想要一种算法来遍历列表切片。切片大小在功能之外设置，可以不同。 在我看来，这就像： 有没有一种使用python 2.5正确定义的方法或其他方法？ edit1：澄清 “分区”和“滑动窗口”这两个术语听起来都适用于我的任务，但是我不是专家。因此，我将更深入地解释该问题并添加到问题中： FatherList是我从文件中获取的一个多级numpy.array。函数必须找到序列的平均值（用户提供
-
在自定义组件里，你可以像任何普通元素一样用v-for。 <my-component v-for="item in items" :key="item.id"></my-component> 2.2.0+ 的版本里，当在组件中使用v-for时，key现在是必须的。 然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要用props： <my-co
-
本文向大家介绍JavaScript中的图遍历，包括了JavaScript中的图遍历的使用技巧和注意事项，需要的朋友参考一下 图遍历（也称为图搜索）是指访问（检查和/或更新）图中每个顶点的过程。此类遍历按访问顶点的顺序分类。
-
在Visual Studio中，使用C#，我得到了三个类似于以下内容的数组： 布尔购物车表示复选框。现在我想做的是，使用一个按钮，检查勾选了哪些框，然后从数组商品中获取商品的名称，并从数组价格中获取商品的价格。然后，我将连接字符串，并将总和相加，然后将其显示在MessageBox中。显示。 我想我需要以某种方式将cart数组的索引与price和goods数组的相应索引联系起来。还是有更好的方法？可
-
本文向大家介绍Java 图片与byte数组互相转换实例，包括了Java 图片与byte数组互相转换实例的使用技巧和注意事项，需要的朋友参考一下 实例如下： 文件解析： FileImageOutputStream 换成了 FileOutputStream FileImageInputStream 换成 FileInputStream 以上这篇Java 图片与byte数组互相转换实例就是小编分享给大家
-
我有四个UITextFields我想在UIAlertView中使用，目前这是它看起来的样子 我希望能够做的是限制每个框为4个字符，每个字段一旦达到4个字符的限制，那么我希望下一个UITextField成为第一个响应器。 我也希望能够做到这一点反过来，所以如果字符正在删除，一旦没有字符可用在第二个字段，到第一个，并开始删除，等等。