Настройте директиву v-on:click внутри v-for

Я отобразил список изображений с некоторой информацией. Я хочу, чтобы эти изображения были кликабельны. И при нажатии на него должен отображаться div с надписью HI!!. Я пытался добавить переменную как show:true в данные Vue и пытался построить некоторую логику, которая при нажатии становится ложной. Но я не смог этого добиться.

Ниже приведен пример кода:

template>
    <div>
        <h1>SpaceX</h1>
        <div v-for="launch in launches" :key="launch.id" class="list" @click="iclickthis(launch)">
            <div ><img :src="launch.links.patch.small" alt="No Image" title={{launch.name}} /></div>
            <div>ROCKET NAME: {{launch.name}} </div>
            <div>DATE: {{ launch.date_utc}} </div>
            <div>SUCCESS: {{ launch.success}} </div>
            <div>COMPLETENESS: {{ launch.landing_success}} </div>
            
        </div>
        <!-- <v-model :start="openModel" @close="closeModel" /> -->
    </div>
</template>
<script>

import axios from 'axios'
export default {
  name: 'SpaceXTimeline',
  components: {
  },
  data: () => ({
    launches : [],
    openModel : false,
    show : true,
  }),
  methods: {
    iclickthis(launch) {
        // this should load a model search v-model / bootstrap on vue  npm install v-model 
        console.log(launch.name + " is launched");
        console.log("DETAILS: "+ launch.details);
        console.log("ROCKET INFO: "+ launch.links.wikipedia);
        console.log("CREW DETAILS: "+ launch.crew);
        console.log("Launchpad Name: "+ launch.launchpad);
        this.openModel = true;
    },
    closeModel () {
        this.openModel = false;
    }
  },
  async created() {
    const {data} = await axios.get('https://api.spacexdata.com/v4/launches');
    data.forEach(launch => {
      this.launches.push(launch);
    });
  }
}; 
</script>

<style scoped>
.list {
  border: 1px solid black;
}
</style>

Спасибо, и ценю много.


person gunn gunner    schedule 22.10.2020    source источник


Ответы (1)


v-model — это привязка, а не элемент, если только вы не назвали компонент так? Это опечатка модального?

В любом случае, похоже, вы хотите v-if:

<v-model v-if="openModel" @close="closeModel" />

Пример:

new Vue({
  el: '#app',
  components: {},
  data: () => ({
    launches: [],
    openModel: false,
    show: true,
  }),
  methods: {
    iclickthis(launch) {
      // this should load a model search v-model / bootstrap on vue  npm install v-model
      console.log(launch.name + ' is launched');
      console.log('DETAILS: ' + launch.details);
      console.log('ROCKET INFO: ' + launch.links.wikipedia);
      console.log('CREW DETAILS: ' + launch.crew);
      console.log('Launchpad Name: ' + launch.launchpad);
      this.openModel = true;
    },
    closeModel() {
      this.openModel = false;
    },
  },
  async created() {
    const {
      data
    } = await axios.get('https://api.spacexdata.com/v4/launches');
    data.forEach(launch => {
      this.launches.push(launch);
    });
  },
})

Vue.config.productionTip = false;
Vue.config.devtools = false;
.modal {
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.5);
}

img {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div id="app">
  <h1>SpaceX</h1>
  <div v-for="launch in launches" :key="launch.id" class="list" @click="iclickthis(launch)">
    <div>
      <img :src="launch.links.patch.small" alt="No Image" :title="launch.name" />
    </div>
    <div>ROCKET NAME: {{ launch.name }}</div>
    <div>DATE: {{ launch.date_utc }}</div>
    <div>SUCCESS: {{ launch.success }}</div>
    <div>COMPLETENESS: {{ launch.landing_success }}</div>
  </div>
  <div v-if="openModel" @click="closeModel" class="modal">
    MODAL
  </div>
</div>

person Daniel_Knights    schedule 22.10.2020
comment
Привет Даниэль. Спасибо. Однако я не могу добиться своих результатов. Как сделать div кликабельным? и при нажатии, как я могу показать любое сообщение? - person gunn gunner; 22.10.2020
comment
То, что у вас есть, должно работать. Я добавлю фрагмент, чтобы вы могли видеть - person Daniel_Knights; 22.10.2020
comment
Спасибо. Это именно то, что я искал. - person gunn gunner; 27.10.2020