How to attach vue event on dynamic element in methods section of vue

Question

In html table row, based on condition, need to update the row with SPAN or NA as below. But, vue onclick is unable to get work.

new Vue({
  el: '#app',
  methods: {
onSelect:function(row){
           if(row["id"] > 10) {
              row["data"]= '<span v-on:click="onclick">Process</span>'
           }
           else {
                row["data"]= 'NA';
             }
    },
    onclick() {
       //do operations
    console.log('click');
    }
  }
})

How above click event can be work.

What are you trying to achieve here? Vue is not designed to have the DOM manipulated by injecting elements in this way, theres likely a far easier/suitable way of solving your problem. — MJ_Wales
– MJ_Wales, Commented Mar 14, 2019 at 17:23
basically, on change of selection in dropdown, want to update the tabluar form 's row with injected SPAN (with vue click event). — user3711357
– user3711357, Commented Mar 14, 2019 at 17:24

tony19 · Accepted Answer · 2022-07-15 23:53:46Z

vue offers the conditional-rendering api- where you can use v-if to render or not an element in your template. (in vue, you shouldn't create elements manually)

there you go: https://jsfiddle.net/efrat19/9kobn6xt/24/

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: "#app",
  data: {
  isClicked:false,
    companies: [
      { name: 'Alfreds Futterkiste',contact: 'Maria Anders',country:'Germany'},
      { name: 'companyZ',contact: 'efrat',country:'Israel'},
      { name: 'Ernst Handel',contact: 'bkjb',country:'USA'},
    ]
  },
  methods: {
    onClick: function(){
        this.isClicked = true;
    }
  }
})

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

span {
  background-color: pink;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <h2>HTML Table</h2>
<button @click="onClick()">click me to insert a span to every column!</button>
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr v-for="company in companies">
    <td>{{company.name}}</td>
    <td>{{company.contact}}</td>
    <td>{{company.country}}
    <span v-if="isClicked">i only exist after click!</span></td>
  </tr>
  
</table>
</div>

Collectives™ on Stack Overflow

How to attach vue event on dynamic element in methods section of vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related