仅使 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供参考

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

Only make the buttons inside v-list clickable, while disabling the v-list-item content

javascript

frontend

list

vue.js

vuetify.js