vuej의 다차원 배열 문제

vuej의 다차원 배열 문제

다차원 배열

이벤트 테이블

우리는 여러 개의 물체를 가지고 있고, 각각의 물체 안에는 배열이 있고, 각각의 배열이 물체를 가지고 있다.[다차원 배열] users.id(현재 로그인한 사용자)에 문제.user_id가 있는지 확인하고 싶다. 있으면 버튼이 비활성화되고 그렇지 않으면 거짓으로 돌아온다.

하지만 우리는 주어진 '이벤트 테이블' 스크린샷과 같은 모든 배열들을 가지고 있다.

<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>

"조인" 또는 "이미 가입"(비활성화됨) 버튼 하나만 표시하시겠습니까?내가 맞히면 반복하고 싶지 않은 것 같아.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>

참조URL: https://stackoverflow.com/questions/54780974/problem-with-multidimensional-array-in-vuejs