previewer 关于在v-for 提示this.$refs.previewer.show is not a function 问题

[wangchaolonglls]

代码如下：`

`

[wangchaolonglls]

在线等大神解决，项目着急用，previewer组件中的 :ref="变量"这种方式尝试过未解决问题。

[wg5945]

下次记得格式化下代码

<template>
  <div style="background-color: #EFEFF4;">
    <flexbox v-for="(item,i) in items" :key="i">
      <flexbox-item>
        <img :class="item.name" v-for="(arr, index) in list" :src="arr.src" width="100" height="100"
             @click="show(index,i)">
        <div>
          <previewer :list="list" ref="previewer" :options="item.options"></previewer>
        </div>
        {{item.name}}
      </flexbox-item>
    </flexbox>
  </div>
  <!--<img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" width="100" height="100" @click="show(index)">-->
  <!--<div v-transfer-dom>-->
  <!--<previewer :list="list" ref="previewer" :options="options"></previewer>-->
  <!--</div>-->
</template>

<script>
  import {
    Flexbox, FlexboxItem, XImg, Search, Divider, Scroller, Cell, Group, XInput, XButton, Previewer, TransferDom
  } from 'vux'
  export default{
    directives: {
      TransferDom
    },
    data () {
      return {
        items: [{
          name: 'aaaa',
          options: {
            getThumbBoundsFn (index) {
              // find thumbnail element
              let thumbnail = document.querySelectorAll('.aaaa')[index]
              // get window scroll Y
              let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
              // optionally get horizontal scroll
              // get position of element relative to viewport
              let rect = thumbnail.getBoundingClientRect()
              // w = width
              return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
              // Good guide on how to get element coordinates:
              // http://javascript.info/tutorial/coordinates
            }
          }
        }, {
          name: 'bbbbb',
          options: {
            getThumbBoundsFn (index) {
              // find thumbnail element
              let thumbnail = document.querySelectorAll('.bbbbb')[index]
              // get window scroll Y
              let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
              // optionally get horizontal scroll
              // get position of element relative to viewport
              let rect = thumbnail.getBoundingClientRect()
              // w = width
              return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
              // Good guide on how to get element coordinates:
              // http://javascript.info/tutorial/coordinates
            }
          }
        }],
        list: [
          {
            src: 'https://ooo.0o0.ooo/2017/05/17/591c271ab71b1.jpg'
          },
          {
            src: 'https://ooo.0o0.ooo/2017/05/17/591c271acea7c.jpg'
          }, {
            src: 'https://ooo.0o0.ooo/2017/06/15/59425a592b949.jpeg'
          }]
      }
    },
    components: {
      Flexbox,
      FlexboxItem,
      XImg,
      Search,
      Divider,
      Scroller,
      Cell,
      Group,
      XInput,
      XButton,
      Previewer
    },
    methods: {
      show (index, i) {
        this.$refs.previewer[i].show(index)
      }
    }
  }
</script>
<style lang="less">
</style>

[wangchaolonglls]

谢谢大神，昨天我也找到了问题原因,明白了v-for 后ref 是一个list，读取时要用 this.$refs.previewer[i]这种方式，再次感谢大神积极回复。谢谢，还有一个问题请教下下，是不是v2.4.1版本 预览时没有左右查看按钮了?

[liangshuoGitHub]

下次记得格式化下代码

<template>
  <div style="background-color: #EFEFF4;">
    <flexbox v-for="(item,i) in items" :key="i">
      <flexbox-item>
        <img :class="item.name" v-for="(arr, index) in list" :src="arr.src" width="100" height="100"
             @click="show(index,i)">
        <div>
          <previewer :list="list" ref="previewer" :options="item.options"></previewer>
        </div>
        {{item.name}}
      </flexbox-item>
    </flexbox>
  </div>
  <!--<img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" width="100" height="100" @click="show(index)">-->
  <!--<div v-transfer-dom>-->
  <!--<previewer :list="list" ref="previewer" :options="options"></previewer>-->
  <!--</div>-->
</template>

<script>
  import {
    Flexbox, FlexboxItem, XImg, Search, Divider, Scroller, Cell, Group, XInput, XButton, Previewer, TransferDom
  } from 'vux'
  export default{
    directives: {
      TransferDom
    },
    data () {
      return {
        items: [{
          name: 'aaaa',
          options: {
            getThumbBoundsFn (index) {
              // find thumbnail element
              let thumbnail = document.querySelectorAll('.aaaa')[index]
              // get window scroll Y
              let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
              // optionally get horizontal scroll
              // get position of element relative to viewport
              let rect = thumbnail.getBoundingClientRect()
              // w = width
              return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
              // Good guide on how to get element coordinates:
              // http://javascript.info/tutorial/coordinates
            }
          }
        }, {
          name: 'bbbbb',
          options: {
            getThumbBoundsFn (index) {
              // find thumbnail element
              let thumbnail = document.querySelectorAll('.bbbbb')[index]
              // get window scroll Y
              let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
              // optionally get horizontal scroll
              // get position of element relative to viewport
              let rect = thumbnail.getBoundingClientRect()
              // w = width
              return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
              // Good guide on how to get element coordinates:
              // http://javascript.info/tutorial/coordinates
            }
          }
        }],
        list: [
          {
            src: 'https://ooo.0o0.ooo/2017/05/17/591c271ab71b1.jpg'
          },
          {
            src: 'https://ooo.0o0.ooo/2017/05/17/591c271acea7c.jpg'
          }, {
            src: 'https://ooo.0o0.ooo/2017/06/15/59425a592b949.jpeg'
          }]
      }
    },
    components: {
      Flexbox,
      FlexboxItem,
      XImg,
      Search,
      Divider,
      Scroller,
      Cell,
      Group,
      XInput,
      XButton,
      Previewer
    },
    methods: {
      show (index, i) {
        this.$refs.previewer[i].show(index)
      }
    }
  }
</script>
<style lang="less">
</style>

您好 请问为什么要写两个options，我写两个的话，就会显示两遍图片