1

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.

2
  • 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. 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). Commented Mar 14, 2019 at 17:24

1 Answer 1

2

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>

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.