vue学习笔记 VUE3 v-for 中使用ref
参考:VUE3.0之v-for 中的 Ref 数组<router-linkv-for="tag in visitedViews"ref="tag":key="tag.path":class="isActive(tag) ? 'active' : ''":to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"tag="
·
<router-link
v-for="tag in visitedViews"
ref="tag"
:key="tag.path"
:class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span"
class="tags-view-item"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)"
>
{{ tag.title }}
<span
v-if="!isAffix(tag)"
class="el-icon-close"
@click.prevent.stop="closeSelectedTag(tag)"
/>
</router-link>
moveToCurrentTag() {
const tags = this.$refs.tag;
this.$nextTick(() => {
for (const tag of tags) {
if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag);
// when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch("tagsView/updateVisitedView", this.$route);
}
break;
}
}
});
},
运行报错
for (const tag of tags)
tags is not iterable at Proxy.eval
解决办法参考:VUE3.0之v-for 中的 Ref 数组
<router-link
v-for="tag in visitedViews"
:ref="settagRef"
:key="tag.path"
:class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span"
class="tags-view-item"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent="openMenu(tag, $event)"
>
{{ tag.title }}
<span
v-if="!isAffix(tag)"
class="el-icon-close"
@click.prevent.stop="closeSelectedTag(tag)"
/>
</router-link>
data() {
return {
tagRefs: [],
};
}
beforeUpdate() {
this.tagRefs = [];
},
methods: {
settagRef(el) {
this.tagRefs.push(el);
},
}
moveToCurrentTag() {
const tags = this.tagRefs;
this.$nextTick(() => {
for (const tag of tags) {
if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag);
// when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch("tagsView/updateVisitedView", this.$route);
}
break;
}
}
});
},
运行错误消失
更多推荐
已为社区贡献6条内容
所有评论(0)