Как прикрепить событие vue к динамическому элементу в разделе методов vue

Question

В строке таблицы html, в зависимости от условия, необходимо обновить строку с SPAN или NA, как показано ниже.Но vue onclick не может получить работу.

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');
    }
  }
})

Как может работать вышеуказанное событие клика.

Answer 1

vue предлагает условный рендеринг , где вы можете использовать v-if для рендеринга или отсутствия элемента в вашем шаблоне. (vue, вы не должны создавать элементы вручную)

вот так: 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/vue@2.6.8/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>