Set up a v-on:click directive inside v-for

Question

I have displayed a list of images with some information. I want those images to be clickable. And when clicked it should show a div with saying "HI!!". I have been trying to add a variable as show:true in Vue data and tried to build some logic that show becomes false when clicked. But I have not been able to achieve it.

Below is the sample code:

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>

Thanks, and appreciate a lot.

Answer 1

v-model is a binding and not an element, unless you've named a component that? Is it a misspelling of "modal"?

Either way, sounds like you want a v-if:

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

---

Example:

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>