Посмотреть выбранное изображение

1

Я ищу, чтобы сделать тег img доступным. Я хочу получить логическое значение true/false, если выбранное или снятое фото. Есть идеи?

<h2 class="headline mb-2 text-xs-center">Choose your hero:</h2>
<v-layout row wrap primary-title v-for="hero in heroes" :key="hero.id">
  <v-flex xs6>
    <v-avatar size="80px" class="grey lighten-1">
      <img v-bind:src="'${hero.href}'" alt="avatar">
    </v-avatar>
  </v-flex>
  <v-flex xs6 class="text-xs-right">
    <v-subheader>{{hero.name}}€</v-subheader>
  </v-flex>
</v-layout>
</v-card>
</template>

<script>
  export default {

      data: () => ({

          bases: [{
              id: 1,
              name: "Spiderman",
              href: "../../static/spiderman.jpg"
          }, {
              id: 2,
              name: "Batman",
              href: "../../static/batman.jpg"
          }]
      })
  }
</script>
  • 0
    Вы хотите, чтобы изображения действовали как радиогруппа, где только один может быть выбран в любое время?
  • 0
    Привет Рой, да это так. Просто должно быть возможно выбрать один, а не оба одновременно. Да, точно как радио-кнопка.
Теги:
vue.js
vuejs2
vue-component

1 ответ

1
Лучший ответ

Это простой пример того, что вы можете сделать его доступным

<script>
    export default {
        data(){
            return {
                //...
            }
        },
        methods: {
            selectHero(hero){
                this.$set(hero, 'selected', (hero.selected ? false:true)) //!hero.selected
            }
        }
    }
</script>

в шаблоне

<img :src="hero.href" alt="avatar" :class="{selected: hero.selected}" @click="selectHero(hero)">

и если вы хотите выбрать только один элемент

<script>
    export default {
        data(){
            return {
                //...
                selectedHero: {}
            }
        },
        methods: {
            getSelectedHero(){
                return this.selectedHero;
            }
        }
    }
</script>

<img :src="hero.href" alt="avatar" :class="{selected: selectedHero.id == hero.id}" @click="selectedHero = hero">

<style>
    img.selected{
        border: solid 2px green;
        /* and other styles ... */
    }
</style>
  • 0
    Хорошо, спасибо за ответ, Дэймон, должно быть, как вы сказали, просто выберите один элемент, а не оба одновременно, как в случае с переключателем. Я просто понимаю ваш код, но не могу увидеть выбранное изображение, код выглядит выполненным без ошибок, но я не могу определить, как выбрано изображение ...
  • 0
    Смотрите обновления. @ user8548238
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню