javascript - binding a ref does not work in vue.js? - Stack Overflow

admin管理员组

文章数量:1356815

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',
    ponents: {           
         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',
    ponents: {           
         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?

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',
    ponents: {           
         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',
    ponents: {           
         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?

• javascript
• ecmascript-6
• vue.js

Share Improve this question Follow edited Jan 21, 2018 at 22:25 musicformellons asked Jan 21, 2018 at 22:14 musicformellonsmusicformellons 13.4k55 gold badges5757 silver badges9494 bronze badges 7

• What doesn't work? What do you expect? – dvnguyen Commented Jan 21, 2018 at 22:19
• @dvnguyen Edited my question. Hope it is clearer now. – musicformellons Commented Jan 21, 2018 at 22:25
• I see. You changed the ref to testThis and since testThis is a method which returns file0, you expect the ref would be assigned to file0? I'm afraid that couldn't work, since :ref only accepts strings as my understanding. – dvnguyen Commented Jan 21, 2018 at 22:32
• @dvnguyen Uh.., but I am handing it a string? – musicformellons Commented Jan 21, 2018 at 22:34
• You're handing it the string "testThis", right? So the ref at this point would be "testThis". to make IconClick work, you need to change the ref name to "testThis": this.$refs['testThis'].click() – dvnguyen Commented Jan 21, 2018 at 22:36

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

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 ponent 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 ponent 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.

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 puted rather than a method.

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

<script src="//cdnjs.cloudflare./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>

本文标签： javascriptbinding a ref does not work in vuejsStack Overflow