vuejs中的多维数组问题

Question

多维数组

事件表

我们有多个对象，每个对象内部都有数组，每个数组都有对象。[多维数组] 我们要检查users.id（当前登录用户）中是否存在problem.user_id 如果是，则按钮将被禁用，如果不是，则返回 false。

但我们得到了所有数组，如给定的“事件表”屏幕截图。

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

Answer 1

所以您只想显示一个按钮，“加入”或“已加入”（禁用），对吗？如果我猜对了，我想你不想迭代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>