绑定 ref 在 vue.js 中不起作用？

Question

When I v-bind a element-ref with :ref="testThis" it stops working it seems. Compare this version which works:

<template>
    <div>
        <q-btn round big color='red' @click="IconClick">
        YES
        </q-btn>
        <div>
            <input
                ref="file0"
                multiple
                type="file"
                accept=".gif,.jpg,.jpeg,.png,.bmp,.JPG"
                @change="testMe"
                style='opacity:0'
            >
        </div>
    </div>
</template>

<script>
import { QBtn } from 'quasar-framework'

export default {
  name: 'hello',
    components: {           
         QBtn
    },
    data () {
    return {
      file10: 'file0'
    }
  },
  methods: {
    IconClick () {
      this.$refs['file0'].click()
    },
        testMe () {
            console.log('continue other stuff')
        }
    }
}

</script>

With this one which DOES NOT work:

<template>
    <div>
        <q-btn round big color='red' @click="IconClick">
        YES
        </q-btn>
        <div>
            <input
                :ref="testThis"
                multiple
                type="file"
                accept=".gif,.jpg,.jpeg,.png,.bmp,.JPG"
                @change="testMe"
                style='opacity:0'
            >
        </div>
    </div>
</template>

<script>
import { QBtn } from 'quasar-framework'

export default {
  name: 'hello',
    components: {           
         QBtn
    },
    data () {
    return {
      file10: 'file0'
    }
  },
  methods: {
    IconClick () {
      this.$refs['file0'].click()
    },
        testThis () {
            return 'file0'
        },
        testMe () {
            console.log('continue other stuff')
        }
    }
}

</script>

The first one works. The second one throws an error:

TypeError: Cannot read property 'click' of undefined
    at VueComponent.IconClick

As I would like to vary the ref based on a list-index (not shown here, but it explains my requirement to have a binded ref) I need the binding. Why is it not working/ throwing the error?

Answer 1

In the vue docs I find that a ref is non-reactive: "$refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding."

I think that matches my case.

My actual problem 'how to reference an item of a v-for list' is NOT easily solved not using a binded ref as vue puts all similar item-refs in an array, BUT it loses (v-for index) order .

I have another rather elaborate single file component which works fine using this piece of code:

 :ref="'file' + parentIndex.toString()"

in an input element. The only difference from my question example is that parentIndex is a component property.

All in all it currently is kind of confusing as from this it looks like binding ref was allowed in earlier vue version.

EDIT: Triggering the method with testThis() does work .

Answer 2

If you want to use a method, you will need to use the invocation parentheses in the binding to let Vue know you want it to bind the result of the call and not the function itself.

             :ref="testThis()"

I think the snippet below works as you expect it to. I use a computed rather than a method.

 new Vue({ el: '#app', data() { return { file10: 'file0' } }, computed: { testThis() { return 'file0'; } }, methods: { IconClick() { this.$refs['file0'].click() }, testMe() { console.log('continue other stuff') } } });

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="app"> <q-btn round big color='red' @click="IconClick"> YES </q-btn> <div> <input :ref="testThis" multiple type="file" accept=".gif,.jpg,.jpeg,.png,.bmp,.JPG" @change="testMe" style='opacity:0'> </div> </div>