Is possible create event on click in object - Vue JS

Question

new Vue({
  el: "#app",
  data: {
    checking: [
      { text: "Event 1 <a :click='test()' class='click'>click here</a>" },
      { text: "Event 2" },
      { text: "Event 3" },
      { text: "Event 4" }
    ]
  },
  methods: {
    test() {
      console.log("clicked")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.2/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(check, i) in checking" :key="i" v-html="check.test"></li>
  </ul>
</div>

Is it possible to create an event click in an object? I tried but always failed, maybe something's wrong in my code. Thank you.

here is my full code fiddle

Mahamudul Hasan · Accepted Answer · 2020-02-21 03:52:49Z

2

you can try like below, hope resolve your problem, fiddle

template:

 <div id="app">
  <ul>
    <li v-for="(check, i) in checking"  :key="i">
     {{check.text}} <a @click='test' class='click'>click here</a>
    </li>
  </ul>
</div>

Vue instance:

new Vue({
      el: "#app",
      data: {
        checking: [
          { text: "Event 1" },
          { text: "Event 2" },
          { text: "Event 3" },
          { text: "Event 4" }
        ]
      },
      methods: {
        test() {
          console.log("clicked")
        }
      }
    })

Screen will look like this:

edited Feb 21, 2020 at 3:52

answered Feb 21, 2020 at 3:47

Mahamudul Hasan

2,8232 gold badges19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dedi wibisono Over a year ago

Hi thanks for answer, I mean click here for specific object

Mahamudul Hasan Over a year ago

you can pass the parameter into test(parameter) to use specific object

tony19 · Accepted Answer · 2022-07-15 23:05:02Z

2

You can't do it. According to Vue API's documentation:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.

It's even discouraged:

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

edited Jul 15, 2022 at 23:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 21, 2020 at 4:37

Manuel Abascal

6,3577 gold badges47 silver badges77 bronze badges

Comments

Swimmer F · Accepted Answer · 2020-02-21 03:49:54Z

1

You can add click events with the v-on:click property:

new Vue({
  el: "#app",
  data: {
    checking: [
      { text: "Event 1" },
      { text: "Event 2" },
      { text: "Event 3" },
      { text: "Event 4" }
    ]
  },
  methods: {
    test(input) {
      console.log("Element " + (input + 1 ) +" clicked")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.2/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(check, i) in checking" :key="i" >{{ check.text }} <a v-on:click="test(i)">click here</a></li>
  </ul>
</div>

answered Feb 21, 2020 at 3:49

Swimmer F

9036 silver badges16 bronze badges

Collectives™ on Stack Overflow

Is possible create event on click in object - Vue JS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related