Vue.js 如何将vue事件附加到vue的“方法”部分的动态元素上

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

newvue({
el:“#应用程序”，
方法：{
onSelect：函数（行）{
如果（第[“id”]>10行）{
行[“数据”]=“进程”
}
否则{
行[“数据”]=“NA”；
}
},
onclick（）{
//做手术
console.log（'click'）；
}
}
})

以上单击事件的工作方式。

vue提供了api—您可以在其中使用

v-if

渲染或不渲染模板中的元素。（在vue中，不应手动创建元素）

好了：

Vue.config.productionTip=false；
Vue.config.devtools=false；
新Vue({
el:“应用程序”，
数据：{
isClicked:错，
公司：[
{姓名：'Alfreds Futterkiste'，联系人：'Maria Anders'，国家：'Germany'}，
{姓名：'companyZ'，联系人：'efrat'，国家：'Israel'}，
{姓名：'Ernst Handel'，联系人：'bkjb'，国家：'USA'}，
]
},
方法：{
onClick:function（）{
this.isClicked=true；
}
}
})

td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
跨度{
背景颜色：粉红色；
}

HTML表格
单击“我”将跨度插入到每一列！
单位
接触
国家
{{company.name}
{{company.contact}
{{company.country}
我只在点击后才存在！

您在这里想要实现什么？Vue的设计目的不是通过这种方式注入元素来操纵DOM，可能有一种更容易/更合适的方法来解决您的问题。基本上，在更改下拉列表中的选择时，希望使用注入的跨度（使用Vue单击事件）更新tabluar表单的行。