作者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/m.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