作者idareyou (HellTraveller)
看板Web_Design
标题[问题] vue中组件继承与FireFox的Js问题
时间Wed Dec 6 15:39:04 2017
----------------------------------------------------
翻了一下文件，使用原厂的方式处理了，原理是直接从data删除
https://cn.vuejs.org/v2/guide/transitions.html
只是我使用<btn v-for="(tag,index) in tags" v-bind:key="tag.text" @click="removeTag(index)">
资料方面
removeTag: function(index) {
this.options.splice(index,1)
}
因为是配合渐变来做TAG，所以需要绑KEY，一开始做的很痛苦因为都绑tag.index，然後跑出诡异的淡出，最後绑其他的东西像是tag.text，就正常了
----------------------------------------------------
各位好
目前小弟使用Vue搭建前台，不过因为javascript在的执行遇到瓶颈，而且只有FireFox不能使用，浏览器提示是event的问题(後述)
执行的目标是:
在说明页中，有个标签按钮页，点选标签按钮後按钮会消失，按钮为共用组件，可以从任何地方引入并简单的套上效果、icon以及script
目前的状况是:
按钮组件btn.vue <btn></btn>
标签按钮页tag.vue <tag></tag>
说明页page.vue #/control
按钮组件btn做出来後，由标签按钮页tag引入，紧接着说明页#/control引入标签按钮页
javascript方面，因为无法直接在组件写上<btn @click="removetag($event)">
只能到最根源的btn.vue，先绑上一个事件，并加入this.$emit('click'); 其中click是自订名称，为通用性就这样写不知是否会出问题。
然後tag.vue就能使用<btn @click="removetag($event)">了，最後加上script，其他浏览器都正常，就FireFox报错。
问题点:
子组件经父组件引入後，FireFox我是怎麽试都动不了，只会报错
[Vue warn]: Error in event handler for "click": "ReferenceError: event is not
defined"
直接写死一个标签按钮页是可行，但好像就失去写btn的价值了，毕竟还有一长串的icon、颜色、disabled和文字等等要补上
只能有劳各位给小弟指引
因为这个组件结构好像没办法在jsfiddle显示，只能丢出丑丑的纯文字画面了，望各位海涵
.vue的内容如下:
btn.vue
-----------------------------------------------------------------------------
<!-- 缘起，因为btn很长，带入此按钮即可快速生成需要的样式 -->
<template>
<button @click="clickMe($event)" type="button">
<slot></slot>
{{text}}
</button>
</template>
<script>
var data = {
text: {
default: this.text || '??'
}
}
export default {
name: 'btn',
props: data,
methods: {
clickMe: function (event) {
// var event = event || window.event;
// alert("QQ");
this.$emit('click');//
}
}
}
</script>
tag.vue
-----------------------------------------------------------------------------
<template>
<article>
<h4>点选移除标签</h4>
<btn @click="removeTag($event)" v-for="btn in btns" :text="btn.text">移除
</btn>
<hr>
<button @click="removeTag2($event)">元件内非继承</button>
</article>
</template>
<script>
import btn from '@/components/foxbtn.vue'
export default {
name: 'foxTag',
components: {
'btn': btn
},
data() {
return {
btns: [{
text: '01'
},
{
text: '02'
},
{
text: '03'
}]
}
},
methods: {
removeTag: function(e) {
var tag = $( event.target );
console.log(tag);
tag.attr('disabled', 'true').fadeOut(200, function() {
tag.remove()
});
},
removeTag2: function(event) {
var tag = $( event.target );
console.log(tag);
tag.attr('disabled', 'true').fadeOut(200, function() {
tag.remove()
});
}
}
}
</script>
page.vue只是单纯引入，就不放上了
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 218.161.114.239
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1512545947.A.FAB.html
※ 编辑: idareyou (218.161.114.239), 12/06/2017 15:45:33
1F：推 eight0: removeTag(e) 似乎该改成 removeTag(event) 12/06 20:26
有试过像是e event $event都无法 QQ
※ 编辑: idareyou (218.161.114.239), 12/07/2017 08:37:53
2F：推 eight0: 是指这行 removeTag: function(e) { 12/07 13:34
tag1依旧没有反应
不过tag2是没有问题的，看样子得从其他方法下手了
※ 编辑: idareyou (218.161.114.239), 12/07/2017 14:12:00
※ 编辑: idareyou (218.161.114.239), 12/07/2017 15:50:50