javascript - VueJs SPA 在单击按钮上执行功能
问题描述
我需要从邮件列表标签运行 refreshMailList 函数,从邮件列表组件中捕获点击事件。
我有这个组件的这个 vue 实例:
Vue.component('mail-list', {
props: ['inboxmail'],
template:
`
<div>
<h4>{{inboxmail}}</h4>
<button>Refresh</button>
</div>
`
});
//Creating the Vue object.
let options = {
el: "#app",
data: {
pollingId: null,
inbox: ''
},
created: function() {
this.refreshMailList()
},
methods:{
refreshMailList: function(){
fetch('/inbox')
.then(response => response.json())
.then(aJson => {
this.inbox = aJson;
})
},
} //end methods
} //end options
//ViewModel (vm)
let vm = new Vue(options);
我有这个 index.html:
<div id="app">
<mail-list v-bind:inboxmail="inbox" @refresh='refreshMailList'></mail-list>
</div>
解决方案
您需要从邮件列表组件内部发出事件。
试试这个片段:
Vue.component('mail-list', {
props: ['inboxmail'],
methods: {
refresh: function() {
this.$emit('refresh');
},
},
template:
`
<div>
<h4>{{inboxmail}}</h4>
<button @click="refresh">Refresh</button>
</div>
`
});
推荐阅读
- r - 根据其他数据框值 [R] 从一列数据框更改值
- python - 如何启动可以使用某些 django 功能的守护进程?
- powershell - 如何忽略 Invoke-Webrequest 错误消息
- r - 从每个单元格中具有多个日期的列中提取最新日期
- python - 何时以及如何将 `slice(obj)` 用于非`int`/`None` 类型?
- python - 将“for循环”与python中的列表结合使用
- math - 使用 NLP 技术的单词之间的距离
- php - 使用另一个字段作为值将计算字段添加到每个数组元素
- javascript - kurento rtsp2webrtc 演示一直显示微调器而不是流
- android - FFMPEG 音频转换花费了太多时间