ran into a problem

If the component code is table.vue, which displays an array of source objects in a table

<template> <div> <table border="1"> <tr v-for="(tr,i) in source" :key="i"> <td v-for="(td, ii) in tr" :key="ii">{{ td }}</td> </tr> </table> </div> </template> <script> export default { data() { return { source: [ { q: 'qwe', a: 'asd', b: 'asd' }, { q: 'qwe', a: 'asd', b: 'asd' }, { q: 'qwe', a: 'asd', b: 'asd' } ] }; }, methods:{ test(){ console.log(1) } } </script>

How to dynamically add an @click event only to those columns that correspond to the "a" property of each object in the source array. Those. so that in the resulting table, in this example, you can click on each cell in the second column and run the test () method

    1 answer 1

     <template> <div> <table border="1"> <tr v-for="(tr,i) in source" :key="i"> <td v-for="(td, ii) in tr" :key="ii" v-on="{click: td.a === 'asd' ? test : ()=>{}}">{{ td }}</td> </tr> </table> </div> </template> <script> export default { data() { return { source: [ { q: 'qwe', a: 'asd', b: 'asd' }, { q: 'qwe', a: 'asd', b: 'asd' }, { q: 'qwe', a: 'asd', b: 'asd' } ] }; }, methods:{ test(){ console.log(1) } } </script>

    A more universal way can be seen here. Hang up several different events by condition. Vuejs

    • Yes, but so @click hangs on every cell of the tables, and so that hangs only on every second? and without reference to the contents of the cell? - alogin
    • The question about parity was not discussed: которые соответствуют свойству "а" каждого объекта массиве source . You have all the objects in the array the same. - Dmytryk
    • I agree an unsuccessful example. Ideally, an array of objects can be of the type such a source: [{q: 'qwe', a: 'asd', b: 'asd'}, {q: 'qwe', b: 'asd', a: ' uio}, {a: 'nbf', b: 'asd', q: 'qwe'}] - alogin pm