访问vue组件中的子项

时间:2018-02-12 09:01:18

标签: javascript vuejs2

我对Vuejs全新,遇到问题我无法解决。

以下是我的HTML:

<div id="app" class="container">
  <template id="upload-button">
    <button class="btn btn-primary" data-loading-text="Uploaden" @click="uploadButtonClicked">
      Uploaden
    </button>
    <input ref="uploadTag" type="file" name="{{name}}" accept="{{mime}}"  />
  </template>  
  <upload-button url="http://www.google.com" method="post" name="pol" mime=".json"></upload-button>
</div>

这是JS:

Vue.component('upload-button', {
  template: '#upload-button',
  props:{
    url: String,
    method: String,
    name: String,
    mime: String
  }, 
  methods:{
    uploadButtonClicked: function(){
        console.log(this.$refs);
        var uploadTag = this.$refs.uploadTag;
      alert(uploadTag);
    }
  },
});

var vue = new Vue({
  el: '#app',
});

问题是this.$refs一直都是空的。我在文档中读到,在安装组件后它会被填充。 当我单击按钮元素时,我认为该组件已经安装。真的吗? 我错过了什么?

1 个答案:

答案 0 :(得分:0)

你正在寻找你的控制台吗?您很快就会发现Vue没有呈现您的网页,因为您的模板无效。您需要从输入中删除动态属性,然后将组件模板移出app下的子树。当Vue能够生成渲染功能时,$refs工作正常。

以下是标记更改working in jsfiddle ...

<div id="app" class="container">  
  <upload-button url="http://www.google.com" method="post" name="pol" mime=".json"></upload-button>
</div> 
<template id="upload-button">
  <div>
    <button class="btn btn-primary" data-loading-text="Uploaden" @click="uploadButtonClicked">
      Uploaden
    </button>
    <input ref="uploadTag" type="file" name="garbage" accept="application/json"  />
  </div>
</template>