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提供了conditional-rendering API，您可以在其中使用v-if来渲染模板中的元素或不显示元素。（当然，您不应该手动创建元素）

您去了： 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>

如何在vue的方法部分中的动态元素上附加vue事件

1 个答案: