仅使 v-list 内的按钮可点击，同时禁用 v-list-item 内容

Question

我正在使用v-list 组件来显示产品的可用捆绑包。基本上，我希望能够按下v-list 中的一个按钮来删除这个捆绑包（v-list 行上的项目）。

点击按钮可以正常工作，但整个v-list-content 是可点击的。即使它什么也不做，我想禁用它，以便用户只能单击每个v-list-item 右侧的按钮。有没有办法做到这一点？

我知道我可以将道具 disabled 添加到 v-list 标记中。但是，v-list 的每个子标签都被禁用，因此按钮变得不可点击。

<v-list rounded> <!-- disabled -->
  <v-list-item-group
    v-model="selectedItem"
    color="primary"
  >
    <v-list-item
      v-for="(bundle, i) in editForm.suggested_bundles"
      :key="i"
    >
      <v-list-item-content append-icon="mdi-delete">
        <v-list-item-title v-text="bundle"></v-list-item-title>
      </v-list-item-content>
      <v-list-item-icon>
        <v-btn @click="removeBundle(editForm.suggested_bundles, bundle)">
          <v-icon small>mdi-delete</v-icon>
        </v-btn>
      </v-list-item-icon>
    </v-list-item>
  </v-list-item-group>
</v-list>

有什么解决办法吗？ 提前致谢！

Answer 1

在我看来您可能不需要v-list-item-group，因此删除它后，只有您的按钮是可点击的：

<v-list-item v-for="(bundle, i) in editForm.suggested_bundles" :key="i">
  <v-list-item-content append-icon="mdi-delete">
    <v-list-item-title v-text="bundle"></v-list-item-title>
  </v-list-item-content>
  <v-list-item-icon >
    <v-btn @click="removeBundle(editForm.suggested_bundles[i])">
      <v-icon small>mdi-delete</v-icon>
    </v-btn>
  </v-list-item-icon>
</v-list-item>

如果您需要使用selectedItem，您可以随时（重新）分配removeBundle 函数中的值。希望此解决方案能满足您的需求。

DEMO供参考