主页 / 问题 / 1060248
Accepted
Gleb Pristupa
Asked:2020-12-18 19:31:13 +0800 CST2020-12-18 19:31:13 +0800 CST

在 VueJs 模式中重复数据

  • 772

我不明白如何做到这一点，以便当您单击按钮打开模态框时，例如第二个对象，模态框会打开同一个对象的数据。 https://codepen.io/Glebmak/pen/wvBgeVG

new Vue({
	el: '#app',
	data () {
		return {
			showModal: false,
			cands: [
				{ firstName: 'John', lastName: 'Doe'},
        { firstName: 'Flow', lastName: 'Obama'},
        { firstName: 'Kanye', lastName: 'West'}
			],
		}
	},
})
#app {
  font-family: Open Sans;
}
section {
  max-width: 920px;
  margin: 0 auto;
}
.title {
  text-align: center;
}
.candidates {
  margin: 0 auto;
  tbody {
    tr {
      td {
        padding-right: 16px;
        img {
          width: 50px;
          border-radius: 50%;
        }
      }
    }
  }
}
.overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  position: relative;
  width: 300px;
  z-index: 9999;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <section>
    <table class="candidates">
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(cand, index) in cands" :key="index">
          <td>{{ cand.firstName }}</td>
          <td>{{ cand.lastName }}</td>
          <td><button @click="showModal = true">View</button></td>
        </tr>
      </tbody>
    </table>
    <div class="overlay" v-if="showModal" @click="showModal = false"></div>
    <div class="modal" v-if="showModal">
      <div class="modal-contant" v-for="(cand, index) in cands" :key="index">
        <img src="" alt="" />
        <div>{{ cand.firstName }}</div>
        <div>{{ cand.lastName }}</div>
      </div>
      <button class="close" @click="showModal = false">Close</button>
    </div>
  </section>
</div>

html

1 个回答

  1. Best Answer

    有必要将点击处理移动到单独的方法中并使用其中的数据

        new Vue({
    	el: '#app',
    	data () {
    		return {
    			showModal: false,
    			cands: [
    				{ firstName: 'John', lastName: 'Doe'},
            { firstName: 'Flow', lastName: 'Obama'},
            { firstName: 'Kanye', lastName: 'West'},
{ firstName: 'Ozzy', lastName: 'Ozborne'},
    			],
                dataForModal: {},
    		}
    	},
    methods: {
      openModal(cand){
          this.dataForModal = cand;
          this.showModal = true;
      }
    }
    })
    #app {
  font-family: Open Sans;
}
section {
  max-width: 920px;
  margin: 0 auto;
}
.title {
  text-align: center;
}
.candidates {
  margin: 0 auto;
  tbody {
    tr {
      td {
        padding-right: 16px;
        img {
          width: 50px;
          border-radius: 50%;
        }
      }
    }
  }
}
.overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  position: relative;
  width: 300px;
  z-index: 9999;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #fff;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <section>
    <table class="candidates">
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
        </tr>
      </thead>
      <tbody>
       <template v-for="(cand, index) in cands">
        <tr v-if="(index+1) % 2 === 0" :key="index">
          <td>{{ cand.firstName }}</td>
          <td>{{ cand.lastName }}</td>
          <td><button @click="openModal(cand)">View</button></td>
        </tr>
       </template>
      </tbody>
    </table>
    <div class="overlay" v-if="showModal" @click="showModal = false"></div>
    <div class="modal" v-if="showModal">
      <div class="modal-contant">
        <img src="" alt="" />
        <div>{{ dataForModal.firstName }}</div>
        <div>{{ dataForModal.lastName }}</div>
      </div>
      <button class="close" @click="showModal = false">Close</button>
    </div>
  </section>
</div>

    还有这样一个问题，如果我们有对象的ID（1,2,3,4 ...），那么如何使它只显示偶数ID？

    您需要将显示的部分包装在一个包装器中，通常带有标签template，并按条件显示

    • 2

相关问题