علی
6 سال پیش توسط علی مطرح شد
2 پاسخ

event هندلینگ در vue js

سلام دوستان من کد زیر رو توی یک کامپوننت ویو نوشتم و میخام وقتی روی addBtn کلیک شد یه مدال باز بشه یا نمیدونم یه پیغام اصلا چاپ بشه. مشکل اینه که من addBtn رو توی جاوااسکریپت به صورت داینامیک تولید کردم و حالا وقتی روش کلیک میشه تابعش رو نمیشناسه


<template>
  <div style="width: 100%;height: 100%;">
    <div id="homemap" style="width: 100%;height: 100%;"></div>
  </div>
</template>

<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((location) => {

      var map = L.map('homemap').setView([location.coords.latitude, location.coords.longitude], 13);

      var marker = L.marker([location.coords.latitude, location.coords.longitude], {draggable: 'true'})

        .bindPopup('<a href="#" v-on:click="uploadForm" class="addBtn">اینجا کجاست ؟ </a>')

    });
  } else {

  }

  export default {
    name: 'home-map',
    data() {
      return {
        test: 1
      }
    },
    methods: {
      uploadForm() {
        console.log(1111);
      }
    }
  }

  $(function () {

    $('#homemap').on('click', '.addBtn', function (event) {
      console.log(11111111);
    });

  });
</script>

ثبت پرسش جدید
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش آپدیت شد
1

مورد از اینجاست

      $(function () {

        $('#homemap').on('click', '.addBtn', function (event) {
          console.log(11111111);
        });

شما داخل کدهای Vue اومدی از کلیک هندلینگ jQuery استفاده کردید.


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 6 سال پیش مطرح شد
0

داخل methods یه متد جدید تعریف کنید.

   methods: {
      uploadForm() {
        console.log(1111);
      },

      addBtn() {
        e.preventDefault;
    console.log(11111111);
      }
    }

لینک هم باید بصورت زیر باشه

<a href="#" @click="addBtn">

و UploadForm رو به تگ <form> و رویداد submit بایند کنید.

<form @submit="uploadForm" >

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام