在 v-for 中设置 v-on:click 指令

Question

我已经显示了包含一些信息的图像列表。我希望这些图像是可点击的。当点击它应该显示一个带有“HI!!”的div。我一直在尝试在 Vue 数据中添加一个变量为show:true，并尝试构建一些在单击时显示变为错误的逻辑。但是我一直没能实现。

下面是示例代码：

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>

谢谢，非常感谢。

Answer 1

v-model 是一个绑定而不是一个元素，除非你已经命名了一个组件？是不是“modal”的拼写错误？

无论哪种方式，听起来你都想要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>