Question

我在表中显示菜单列表，并使用v-for循环，我要设置复选框是否选中数据菜单中的“ id”与grupMenu中的“ id_menu”相同，请问有人有相同的问题吗？分享它如何解决，我对Vue真的很陌生，谢谢您的帮助，

new Vue({
  el: "#app",
  data: {
    menus: [{
        id: 1,
        name_menu: "Setting",
        parent: 0
      },
      {
        id: 2,
        name_menu: "Users",
        parent: 1
      },
      {
        id: 3,
        name_menu: "Menu",
        parent: 1
      },
      {
        id: 4,
        name_menu: "Role",
        parent: 1
      },
    ],
    grupMenu: [{
        id: 1,
        id_user_group: 1,
        id_menu: 1,
        role: 1
      },
      {
        id: 2,
        id_user_group: 1,
        id_menu: 2,
        role: 0
      },
    ]
  },
  methods: {

  }
})

.text-center {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <table border="1">
    <thead>
      <tr>
        <th rowspan="2" style="vertical-align:middle;text-align:center">Menu</th>
        <th colspan="3" style="text-align:center">Previlege</th>
      </tr>

      <tr class="">
        <th class="text-center">Insert</th>
      </tr>
    </thead>

    <tbody>

      <tr v-for="menu in menus" :key="menu.id">

        <td v-if="menu.parent == 0" style="color:blue">
          <input type="checkbox">
          <!-- <input type="checkbox" v-model="checked"> -->
          <b class="ml-2">{{menu.name_menu}}</b>
        </td>
        <td v-else>
          <input type="checkbox" class="ml-5"> -- {{menu.name_menu}}
        </td>
        <td class="text-center">
          <input type="checkbox">
        </td>


        <!-- </div> -->

      </tr>

    </tbody>
  </table>
</div>

在fiddle

Answer 1

如果我的理解正确，您希望选中menu中id在menu_id中显示为grupMenu的每个条目的复选框。

因此，编写这样的方法：

isInGrupMenu(id) {
    return this.grupMenu.some((item) => item.id_menu === id);
}

并将其绑定到每个复选框的checked属性：

      <input type="checkbox" :checked="isInGrupMenu(menu.id)">

设置复选框检查值是否相同vuejs

1 个答案: