简体   繁体   中英

Vue.js v-for element from $refs broken in watch function

With Vue.js 2.5.22 and FireFox 65.0. What am I missing?

https://jsfiddle.net/r083hqgv/2/

A v-for element identified by a :ref="x" attribute doesn't work as expected in a watch function. I've also tried using :id="x" & getElementById() , and calling setTimeout(..., 200) within $nextTick() .

Code from the above fiddle:

<div id="app" style="position:relative">
  <h2>last element top: {{offset+''}}</h2>
  <button @click="add()">Add &amp; 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);
      });
    }
  }
})

As referenced by the documentation ( $refs ), this.$refs["..."] returns an array when v-for is used. Therefore, change

if (aEl) this.get(aEl);

to

if (aEl) this.get(aEl[0]);

Everything will work (I already tested it on your jsfiddle).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM