I have integrated the phonegap-nfc library into my vue project, and it is working fine. However, I am facing an issue where the information from my NFC card is being displayed on a different page instead of within my app. I want to show all the information that the NFC holds directly in my app. If anyone has any suggestions on how to achieve this, please help me out.
Below is the code snippet:
<template>
<v-app>
<v-card-actions>
<div class="cardInfos">
{{ tagId }}
{{ message }}
</div>
</v-card-actions>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
tagId: "",
message: ""
}),
methods:{
scanNFC(){
window.nfc.enabled(
() => {
// NFC enabled
this.registerTagEvent()
},
(error) => {
if (error === 'NFC_DISABLED') {
// Trigger the phone settings to enable the NFC settings
window.nfc.showSettings()
} else if (error === 'NO_NFC') {
navigator.notification.alert('Cannot scan NFC', () => {}, 'No NFC', 'OK')
}
}
)
},
registerTagEvent () {
window.nfc.addTagDiscoveredListener(
this.displayNdef,
() => {
console.log('succeess registering ndef listener')
},
(error) => {
console.log('failure registering ndef listener', error)
}
)
},
displayNdef (nfcEvent) {
const bgColor = document.getElementsByClassName(".v-application--wrap")
bgColor.style.backgroudColor = "green"
let tag = nfcEvent.tag
let tagId = window.nfc.bytesToHexString(tag.id)
let message = window.nfc.bytesToString(tag.ndefMessage[0].payload)
this.tagId = tagId
this.message = message
window.ndefMessage(tagId, message)
},
deactivated () {
this.unregisterTagEvent()
},
unregisterTagEvent () {
if ((typeof nfc) !== 'undefined') {
window.nfc.removeNdefListener(this.displayNdef)
}
},
};
</script>
If you have any insights or solutions, please assist me :)