Javascript vuejs中的多维数组问题

多维数组

事件表

我们有多个对象，每个对象内部都有数组，每个数组都有对象。[多维数组] 我们想检查users.id（当前登录用户）中是否存在problem.user\u 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>

{{event.user.id}
{{event.user.name}
{{event.id}
{{event.problem[0]。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>

用户id
用户名
事件id
参加
行动
{{event.user.id}
{{event.user.name}
{{event.id}
已加入
参加
/

所以您只想显示一个按钮，“加入”或“已加入”（禁用），对吗？如果我没有弄错，我认为您不想迭代

事件。问题

，因此您应该替换此代码：

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

用户id
用户名
事件id
参加
行动
{{event.user.id}
{{event.user.name}
{{event.id}
已加入
参加
/

您编写的v-if=“problem.user\u id===users.id”是打字错误吗？我在您的屏幕截图中没有看到users.id only user_id.Sry，我再次检查了您的问题，您在那里提到了users.id。但是您能在v-if之前输出这两个值（比如到控制台）吗？您编写的v-if=“problem.user_id==users.id”是打字错误吗？我在您的屏幕截图中没有看到users.id only user_id.Sry，我再次检查了您的问题，您在那里提到了users.id。但是您能在v-if之前输出这两个值吗？它功能齐全。非常感谢。它功能齐全。谢谢。