Функция запуска только на выбранной карте, где карты отображаются с помощью v-for

Все еще пробую Vue с материалом vue; Я использовал v-for для отображения объектов массива на отдельных карточках.

поэтому в template это выглядит так:

<md-card v-for = "fruit in fruits" :key = "fruit.id" md-with-hover>
  <md-card-content>
    <p> {{ fruit.id }} | {{ fruit.name }}  
  </md-card-content>
  <md-card-actions>
    <md-button @click = "showInfo=true">
      <span v-if = "showInfo"> You have selected the {{fruit.name}} with ID number: {{fruit.id}}</md-button>
  </md-card-actions>
</md-card>

а data выглядит так:

fruits: [ {id: '1', name: 'Kiwi'}, {id: '2', name: 'Mango'}, {id: '3', name: 'Apple'}], showInfo: false

Вот что я хотел сделать:

Когда я нажимаю на карту (например, на карту Киви), она дает мне только детали этого объекта (идентификатор и имя)

Из того, что я сделал выше, когда я нажимаю кнопку карты Kiwi, это также запускает отображение диапазона на других картах.

Как я должен продолжать об этом?

javascript vue.js vuejs2 v-for vue-material

07.05.2022 18:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Замените логическое значение для showInfo на fruit.id или индекс:

Vue.use(VueMaterial.default)
new Vue({
  el: '#demo',
  data() {
   return {
     fruits: [ {id: '1', name: 'Kiwi'}, {id: '2', name: 'Mango'}, {id: '3', name: 'Apple'}], 
     showInfo: null
   }
  },
  methods: {
    // ? set id
   showHide(id) {
     this.showInfo === id ? this.showInfo = null : this.showInfo = id
   }
  }
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel = "stylesheet" href = "https://unpkg.com/vue-material/dist/vue-material.min.css"> 
<link rel = "stylesheet" href = "https://unpkg.com/vue-material/dist/theme/default.css">
<div id = "demo">
<md-card v-for = "fruit in fruits" :key = "fruit.id" md-with-hover>
  <md-card-content>
     <p> {{ fruit.id }} | {{ fruit.name }}  
   </md-card-content>
   <md-card-actions>
                       <!-- ? call method and pass id -->
     <md-button @click = "showHide(fruit.id)">more</md-button>
                 <!-- ? compare with id -->
     <span v-if = "showInfo === fruit.id"> 
       You have selected the {{fruit.name}} with ID number: {{fruit.id}}
     </span>
   </md-card-actions>
  </md-card>
</div>
<script src = "https://unpkg.com/vue-material"></script>

Можно ли это также использовать, если я хочу перенаправить на страницу при нажатии на карточку? Кроме того, спасибо!

— 08.05.2022 07:25

07.05.2022 18:52