javascript - 来自 $refs 的 Vue.js v-for 元素在监视功能中损坏
问题描述
使用 Vue.js 2.5.22 和 FireFox 65.0。我错过了什么?
https://jsfiddle.net/r083hqgv/2/
v-for
由属性标识的元素在函数:ref="x"
中无法按预期工作watch
。我也尝试过使用:id="x"
&getElementById()
和调用setTimeout(..., 200)
within $nextTick()
。
来自上述小提琴的代码:
<div id="app" style="position:relative">
<h2>last element top: {{offset+''}}</h2>
<button @click="add()">Add & get top</button>
<ol>
<li v-for="a in list" :key="'r.'+a">
<a @click.stop.prevent="get($event.target)" href="#"
:ref="'r.'+a">get top {{'r.'+a}}</a>
</li>
</ol>
</div>
new Vue({
el: "#app",
data: {
offset: 0,
last: 'unset',
list: [],
},
methods: {
add: function() {
this.last = 'r.'+ this.list.push(this.list.length+1);
this.list = this.list.slice();
},
get: function(iEl) {
this.offset = iEl.offsetTop;
iEl.style = 'font-style:italic';
}
},
watch: {
list: function() {
this.$nextTick(function() {
var aEl = this.$refs[this.last];
if (aEl) this.get(aEl);
});
}
}
})
解决方案
正如文档($refs)所引用的,在使用this.$refs["..."]
时返回一个数组v-for
。因此,改变
if (aEl) this.get(aEl);
至
if (aEl) this.get(aEl[0]);
一切都会奏效(我已经在你的 jsfiddle 上测试过)。
推荐阅读
- svelte-3 - 在屏幕渲染后发生在 svelte onmount 中的 fetch rest api
- aws-control-tower - AWS 控制塔自动化
- php - PHP 解释器在 if("test") 处做什么
- python-3.x - 无法使用新 keras 版本加载使用旧 keras 版本保存的 keras 模型的权重
- sql - 动态日期变量
- maven - maven release:prepare 在 azure 管道中需要很长时间
- android - 如何为recyclerview中的每个cardview创建一个“模板”视图?
- sql - 如何减少优化的查询执行时间?
- php - WordPress - 外部调用的插件形式
- python - nohup 作业会适应文件更改吗?