Question

当我用:ref="testThis" v-bind元素-ref时，它似乎停止工作。比较有效的this version：

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

this one不起作用：

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

第一个有效。第二个引发错误：

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

因为我想根据list-index（这里没有显示，但它解释了我要求绑定ref）来改变ref，我需要绑定。为什么它不起作用/抛出错误？

Answer 1

在vue docs I find中，ref是非反应性的：“$ refs也是非反应性的，因此你不应该尝试在模板中使用它来进行数据绑定。”

我认为这符合我的情况。

我的实际问题'如何引用v-for列表的项目'不容易使用绑定引用来解决，因为vue将所有类似的item-ref放入数组中，但是it loses (v-for index) order。

我有另一个相当复杂的单个文件组件，使用这段代码可以正常工作：

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

在输入元素中。与我的问题示例的唯一区别是parentIndex是一个组件属性。

总而言之，它目前有点令人困惑，因为this看起来在早期的vue版本中允许绑定引用。

编辑：使用testThis() does work触发该方法。

Answer 2

如果你想使用一个方法，你需要使用绑定中的调用括号让Vue知道你希望它绑定调用的结果而不是函数本身。

             :ref="testThis()"

我认为下面的代码段可以按预期运行。我使用computed而不是方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: