0

столкнулся с проблемой

Если код компонента table.vue, которые выводит в таблицу массив объектов source

<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>

Как динамически добавить событие @click только тем столбцам, которые соответствуют свойству "а" каждого объекта массиве source. Т.е. чтобы в полученной таблице, в данном примере, можно было нажать на каждую ячейку второго столбца и выполнился метод test()

1 ответ 1

-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>

Более универсальный способ можете увидеть здесь Повесить несколько разных событий по условию. Vuejs

3
  • Да, но так @click повесится на каждую ячейку таблиц, а так чтобы повесился только на каждую вторую? и без привязки к содержимому ячейки?
    – alogin
    13 мар 2019 в 13:48
  • В вопросе, про четность речь не шла: которые соответствуют свойству "а" каждого объекта массиве source У Вас, все объекты в массиве одинаковые.
    – Dmytro
    13 мар 2019 в 13:50
  • Согласен неудачный пример в идеале массив объектов может быть типа такого source: [ { q: 'qwe', a: 'asd', b: 'asd' }, { q: 'qwe', b: 'asd', a: 'uio }, { a: 'nbf', b: 'asd', q: 'qwe' } ]
    – alogin
    13 мар 2019 в 16:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.