如何通过在 vue 上附加外部点击来获取选定的值？

Question

我有多张卡片，每一张都有唯一的 ID 和任务，如 sc 所示： Cards

单击 append-outer-icon（加号）时，如何从卡片的 v-select 中获取值？

      <v-container fluid>
        <v-row dense align="center" justify="center">
          <v-col cols="2" v-for="card in cards" :key="card.id">
            <v-card class="mx-auto">
              <v-card-title> {{ card.name }} </v-card-title>
              <v-card-subtitle> {{ card.id }} </v-card-subtitle>
              <v-card-actions>
                <v-select
                  :items="items"
                  item-text="name"
                  item-value="value"
                  label="Do stuff"
                  dense
                  outlined
                  prepend-inner-icon="fa-file"
                  append-outer-icon="fa-plus"
                  @click:append-outer="doStuffWithSelectedValue" // do stuff with value from parent v-select
                ></v-select>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>

  methods: {
    doStuffWithSelectedValue(s) {
      // how do I know which v-select icon was clicked and it's value?
    },
  },

  data() {
    return {
      items: [
        { name: "Do first task", value: "FIRST_ITEM" },
      ],
      cards: [
        {
          dateCreated: "2022-02-02T14:21:37.543Z",
          name: "First card",
          id: "FIRST_CARD_ID",
        },
      ],
    };
  },

Answer 1

+ 元素在 v-for 内。这意味着您可以访问当前对象。因此，如果您有 v-for="card in cards"，您可以访问 card.id 并在其中初始化点击侦听器 - @click="doStuffWithSelectedValue" ---> 您可以将该行更改为 @click="doStuffWithSelectedValue(card.id)" 并将其用作方法声明中的参数。

如何通过在 vue 上附加外部点击来获取选定的值？

How to get selected value with append-outer click on vue?

javascript

typescript

vue.js

v-select