Как я могу отобразить дочерний div внутри цикла v-for В vuejs


Как я могу отобразить дочерний div внутри цикла v-for В vuejs

30.09.2020 07:38:13 Просмотров 36 Источник

У меня есть массив, вложенный внутри массива,и я перебираю их с помощью двух циклов v-for. Когда я нажимаю на кнопку, Я хочу, чтобы она отображала div только во втором цикле (div, для которого я нажал свою кнопку). Мне как-то трудно объяснить это словами, поэтому я загрузил его в jsFiddle: https://jsfiddle.net/h8L6zegc/1/

<template> 
<div id="app">
  <h1>my Orders</h1>
  <div v-for="(orders, index) in SubmittedOrders" :key="index">
    <h3>#2222</h3>
    <h4>170$</h4>
    <button @click="openModal(orders)">order details</button>
    <hr>
    <br>
    <div v-show="Showmodal">
      <div v-for="order in orders" :key="order.id">
        <h3>{{ order.orderName }}</h3>
        <h3>{{ order.price * order.quantity }}</h3>
      </div>
      <hr>
      <h3>#2222</h3>
      <h4>170$</h4>
      <button @click="closeModal(orders)">close Modal</button>
    </div>
  </div>
</div>

</template>
<script>

 data() {
    return {
      SubmittedOrders: [
        [{
            orderName: 'Nissan',
            price: 50,
            quantity: 1,
          },
          {
            orderName: 'ferrari',
            price: 120,
            quantity: 2,
          },
        ],
        [{
            orderName: 'porch',
            price: 90,
            quantity: 1,
          },
          {
            orderName: 'Mercedez',
            price: 180,
            quantity: 4,
          },
        ],
      ],
      Showmodal: false,
    };
  },
  methods: {
    openModal(orders) {
      console.log(orders);
      this.Showmodal = true;
    },
    closeModal(orders) {
      this.Showmodal = false;
    }
  }

</script>

У вопроса есть решение - Посмотреть?

Ответы - Как я могу отобразить дочерний div внутри цикла v-for В vuejs / How can I display a child div inside a v-for loop in vuejs

Anatoly

30.09.2020 08:18:55

Вы можете добавить переменную в раздел data для хранения открытого orders и использовать ее для построения условия для v-show. Что-то вроде этого:

<div v-show="orders===activeOrders">
 data() {
    return {
      activeOrders: null
  ...
 methods: {
    openModal(orders) {
      console.log(orders);
      this.activeOrders = orders;
    },
    closeModal(orders) {
      this.activeOrders = null;  
    }
  }
Помочь в развитии проекта:
Закрыть X