我对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
一直都是空的。我在文档中读到,在安装组件后它会被填充。
当我单击按钮元素时,我认为该组件已经安装。真的吗?
我错过了什么?
答案 0 :(得分:0)
$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>