Level 24
is reports really an array? open the console and check the error message
Sep 1, 2020
7
Level 40
@click event is not working in vue component
At first I thought this is going to be and easy thing to build/implement!
But then I hit a dead stop with @click="event_not_working".
Can you guys spot something that I am not doing correctly in code below?
<template>
<div class="an-side-panel" style="top: 90px; z-index: 2000;">
<div class="panel-tab">
<div class="tab-text">
Reports
</div>
</div>
<div class="p-3">
<div :key="report.id" class="d-flex align-items-center border-bottom" v-for="report in reports">
<div @click="download(report)" class="an-text-hover" title="Download">
{{ report.title }}
</div>
<div @click="email(report)" class="mx-2 ">
Email
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {reports: {}},
name: "ReportList",
data() {
return {
}
},
methods: {
email(report) {
console.log(report);
},
download(report) {
console.log('click received', report);
}
},
}
</script>
Both @click="email(report)" and @click="download(report)" events are not responding. Nothing gets console.log('working') in the console when I click on the text.
The reports I pass in as a prop. Component courtly renders that on the page, that tells me that parts of the component do work.
Any thought on what's could be happening?
Level 40
@edoc , reports is array of objects and is correctly being displayed / looped on the page. No errors in the console.
Level 24
most likely you gotta use button instead of div
Level 9
I see you are using z-index. Any chance you have another, transparent element on top of it?
If you right click the div and choose Inspect element, do you end up on the right div?
I just put your code into a quick CodePen and I receive the console.log messages. So I'm thinking something in your layout is blocking the clicks from reaching your divs.
Level 35
a div or button should not matter as long as you click in the area.
You don't see any errors in your console I assume? What if you remove the v-for logic and only add a simple @click="email" ? So the simplest version of the click handler
Level 40
Thank you @edoc, @click & @erikverbeek for the pointers/suggestions. It turned out that I has some js conflicts in how I was importing the js files. Here is what I am importing for that page:
<script src="/js/bootstrap.js?id=90c549f0a4dee406458d"></script>
<script src="/js/account.js?id=9524d33f2faedcaeda60"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<script src="/js/charts.js?id=e7aa87feb27b2d3ea388"></script>
The component with @click event is mixed into account.js. account.js and chart.js both have root vue instances, I believe that is where the conflict is.
I will have to put the chart.js code into account.js, that should fix the issue. The reason why I chose to have the chart.js by itself, is that that code will be used only in a few pages in application.
Level 1
<div class="wpc-banner-content wpc-banner-content-right">
<div class="wpcp-doorconfigurator-manager-recall" style="max-width: 300px;">
<template x-if="<?php echo esc_attr($wpc->store . '.saveDoorConfiguratorModalOpen'); ?>">
<div
x-show="<?php echo esc_attr($wpc->store . '.saveDoorConfiguratorModalOpen'); ?>"
x-transition
@click.self="<?php echo esc_attr($wpc->store . '.toggleSaveDoorConfiguratorModal'); ?>"
style="position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; justify-content: center; align-items: center;"
class="save_door_configurator_modal">
<div class="modal-content model-recall" x-show="open" x-transition style="background: white; border-radius: 8px; padding: 20px; min-width: 400px; max-width: 90%;">
<button class="modal-close close-recall" style="float: right; font-size: 20px; border: none; background: none;" x-on:click="<?php echo esc_attr($wpc->store . '.toggleSaveDoorConfiguratorModal'); ?>">×</button>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="green" class="bi bi-save-fill" viewBox="0 0 16 16" style="margin-bottom: 10px;">
<path d="M8 0a2 2 0 0 1 2 2v1h3.5A1.5 1.5 0 0 1 15 4.5v10A1.5 1.5 0 0 1 13.5 16h-11A1.5 1.5 0 0 1 1 14.5v-13A1.5 1.5 0 0 1 2.5 0H6a2 2 0 0 1 2 0zM6.5 0A1.5 1.5 0 0 0 5 1.5v1h3v-1A1.5 1.5 0 0 0 6.5 0z" />
</svg>
<div class="modal-title model-recall-data" style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">Save Door Configurator</div>
<div class="modal-body" style="margin-bottom: 20px;">
<label for="configName">Enter a name:</label>
<input type="text" id="configName" x-model="<?php echo esc_attr($wpc->store . '.doorconfiguratorName'); ?>" class="modal-input" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
</div>
<div class="modal-footer submit-recall" style="display: flex; justify-content: flex-end; gap: 10px;">
<button class="btn btn-secondary_recall" style="padding: 8px 16px;" x-on:click="<?php echo esc_attr($wpc->store . '.toggleSaveDoorConfiguratorModal'); ?>">Cancel</button>
<button
class="btn btn-success"
style="padding: 8px 16px;background-color: #3ac03ad4;color: white; border: aliceblue;"
x-on:click="<?php echo esc_attr($wpc->store . '.saveDoorConfigurator'); ?>"
x-bind:disabled="<?php echo esc_attr($wpc->store . '.loading'); ?>">
Save
</button>
</div>
</div>
</div>
</template>
<div class="box recall-box">
<div class="recall__data">
<h2>Recall a Saved Custom DoorConfigurator (by ID)</h2>
<input type="text" class="wpc-input recall-input full-width" placeholder="Enter DoorConfigurator ID"
x-model="<?php echo esc_attr($wpc->store . '.recallId'); ?>">
</div>
<button class="btn full-width"
x-on:click="<?php echo esc_attr($wpc->store . '.recallDoorConfigurator()'); ?>">
Recall
</button>
</div>
<!-- Dropdown -->
<template x-if="<?php echo esc_attr($wpc->store . '.doorconfiguratorList.length > 0'); ?>">
<div x-data="{ open: false }" class="doorconfigurator-dropdown_recall " style="margin-top: 10px;">
<button type="button"
class="btn doorconfigurator-dropdown-toggle full-width"
@click="open = !open">
<span>Recall Saved DoorConfigurator</span>
<template x-if="open">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="float: right;">
<path d="M7.646 4.646a.5.5 0 01.708 0l6 6a.5.5 0 01-.708.708L8 5.707l-5.646 5.647a.5.5 0 01-.708-.708l6-6z" />
</svg>
</template>
<template x-if="!open">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="float: right;">
<path d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z" />
</svg>
</template>
</button>
<ul x-show="open" x-transition class="doorconfigurator-dropdown-menu">
<template x-for="doorconfigurator in <?php echo esc_attr($wpc->store . '.doorconfiguratorList'); ?>" :key="doorconfigurator.id">
<li class="dropdown-item">
<span x-text="doorconfigurator.name"
@click="<?php echo esc_attr($wpc->store . '.recallDoorConfiguratorByID(doorconfigurator.id)'); ?>"></span>
<button class="delete-doorconfigurator"
@click.stop="<?php echo esc_attr($wpc->store . '.deleteDoorConfiguratorModal(doorconfigurator.id)'); ?>">
×
</button>
</li>
</template>
</ul>
</div>
</template>
<template x-if="<?php echo esc_attr($wpc->store . '.doorconfiguratorListModalOpen'); ?>">
<div
x-show="<?php echo esc_attr($wpc->store . '.doorconfiguratorListModalOpen'); ?>"
x-transition
@click.self="<?php echo esc_attr($wpc->store . '.toggleDoorConfiguratorListModal'); ?>"
style="position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; justify-content: center; align-items: center;"
class="delete_layer">
<div class="modal-content model-recall" x-show="open" x-transition>
<button class="modal-close close-recall" x-on:click="<?php echo esc_attr($wpc->store . '.toggleDoorConfiguratorListModal'); ?>">×</button>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2" />
</svg>
<div class="modal-title model-recall-data">Delete Saved DoorConfigurator?</div>
<div class="message-recall">
Are you sure you want to delete this saved doorconfigurator? This action cannot be undone.
</div>
<div class="modal-footer" id='fotter_toggle'>
<button class="btn btn-secondary_recall" x-on:click="<?php echo esc_attr($wpc->store . '.toggleDoorConfiguratorListModal'); ?>">Cancel</button>
<button
class="btn btn-danger_recall"
x-on:click="<?php echo esc_attr($wpc->store . '.deleteDoorConfigurator'); ?>"
x-bind:disabled="<?php echo esc_attr($wpc->store . '.loading'); ?>">
Delete
</button>
</div>
</div>
</div>
</template>
</div>
</div>
Please or to participate in this conversation.