Проблема с многомерным массивом в vuejs - PullRequest
Новая
       12

Проблема с многомерным массивом в vuejs

0 голосов
/ 20 февраля 2019

Многомерные массивы

Multidimensional Arrays

Таблица событий

Event Table

Мыесть несколько объектов, внутри каждого объекта у нас есть массивы, и у каждого массива есть объекты. [Многомерные массивы] Мы хотим проверить, существует ли problem.user_id в users.id (текущий вошедший в систему пользователь) Если это так, кнопка будет отключена иесли это не так, он возвращает false.

Но мы получили все массивы, как показано на скриншоте 'Event Table'. 

<tr  v-for="event in events.data" :key="event.id">
                  <td>{{ event.user.id}} </td>

                  <td>{{event.user.name }}</td>

                  <td >{{ event.id}}</td>


                  <td >{{ event.problem[0].problem}}</td>


                  <td  >
                      <div v-for="problem in event.problem" :key="problem.id">
                        <div >
                          <div v-if="problem.user_id ===users.id">
                            <button  class="btn btn-sm btn-outline-success" type="button" @click="participet(event)" :disabled="true">
                              <i class="fa fa-smile" style="font-size:35px;"></i>Already Joined
                            </button>
                          </div>
                          <div v-else="">
                            <button  class="btn btn-sm btn-outline-success" type="button" @click="participet(event)" :disabled="false">
                              <i class="fa fa-smile" style="font-size:35px;"></i>Join
                            </button>
                          </div>
                        </div>
                      </div>

                  </td >
                  <td> <a href="#" @click="editModal(event)">

                        <i class="fa fa-edit blue"></i>
                    </a>
                    /
                    <a href="#" @click="deleteUser(event.id)">
                        <i class="fa fa-trash red"></i>
                    </a>
                  </td>

                  </tr>

1 Ответ

0 голосов
/ 20 февраля 2019

То есть вы хотите отобразить только одну кнопку: «Присоединиться» или «Уже подключен» (отключено), верно?Если я правильно понял, я думаю, что вы не хотите итерировать event.problem, поэтому вы должны заменить этот код: 

<div v-for="problem in event.problem" :key="problem.id">
    <div >
      <div v-if="problem.user_id ===users.id">
        <button  class="btn btn-sm btn-outline-success" type="button" @click="participet(event)" :disabled="true">
          <i class="fa fa-smile" style="font-size:35px;"></i>Already Joined
        </button>
      </div>
      <div v-else="">
        <button  class="btn btn-sm btn-outline-success" type="button" @click="participet(event)" :disabled="false">
          <i class="fa fa-smile" style="font-size:35px;"></i>Join
        </button>
      </div>
    </div>
</div>

этим: 

<div v-if="event.problem.find(p => p.user_id == users.id)">
    <button class="btn btn-sm btn-outline-success" type="button" @click="participet(event)" :disabled="true"><i class="fa fa-smile" style="font-size:35px;"></i>Already Joined</button>
</div>
<div v-else>
    <button class="btn btn-sm btn-outline-success" type="button" @click="participet(event)" :disabled="false"><i class="fa fa-smile" style="font-size:35px;"></i>Join</button>
</div>

Вотупрощенная демонстрация: 

let data = []
for (i=0;i<3;i++) {
  let problems = []
  for (j=0;j<i+1;j++) {
    problems.push({
      user_id: j,
    })
  }
  data.push({
    id: i,
    user: {id: i, name: `user ${i}`},
    problem: problems,
  })
}

const app = new Vue({
  el: '#app',
  data: {
    users: {id: 1},
    events: {data: data},
  },
  methods: {
    editModal: function(e) {},
    deleteUser: function(eid) {},
    participet: function(e) {},
  }
})
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<table id="app">
<tr>
  <th>User id</th>
  <th>User name</th>
  <th>Event id</th>
  <th>Join</th>
  <th>Actions</th>
</tr>
<tr v-for="event in events.data" :key="event.id">
  <td>{{ event.user.id}} </td>
  <td>{{ event.user.name }}</td>
  <td>{{ event.id}}</td>
  <td>
      <div v-if="event.problem.find(p => p.user_id == users.id)">
        <button class="btn btn-sm btn-outline-success" type="button" @click="participet(event)" :disabled="true"><i class="fa fa-smile" style="font-size:35px;"></i>Already Joined</button>
      </div>
      <div v-else>
        <button class="btn btn-sm btn-outline-success" type="button" @click="participet(event)" :disabled="false"><i class="fa fa-smile" style="font-size:35px;"></i>Join</button>
      </div>
  </td>
  <td>
    <a href="#" @click="editModal(event)">
      <i class="fa fa-edit blue"></i>
    </a>
    /
    <a href="#" @click="deleteUser(event.id)">
      <i class="fa fa-trash red"></i>
    </a>
  </td>
</tr>
</table>
...