Question

我已经创建了一个动态填充的数据列表，它可以正常工作。

现在，我需要侦听选项上的click事件以检索data-id值并将其作为值隐藏在输入中。

我已经尝试使用v-on:click.native和@click，但控制台中没有响应。

有什么主意吗？我只是从Vue开始，希望您能为我提供帮助。

编辑： 看起来它不事件触发功能。我已经尝试过v-on:click="console.log('Clicked')"，但没有任何反应。

<input type="hidden" name="id_discipline" id="id_discipline">

<input list="disciplines" id="disciplines-list">
<datalist id="disciplines">
    <option 
    v-for="discipline in disciplines" 
    :key="discipline.id_discipline"
    :data-id="discipline.id_discipline" 
    v-on:click="updateDisciplineId($event)" 
    >{{discipline.name}}</option>
</datalist>

methods: {
    updateDisciplineId(event) {
        console.log('clicked!);
    } 
},

Answer 1

使用datalist并不适合您要达到的目标，但是有一种变通方法有局限性。

模板：

<template>
  <div>
    <input
      type="text"
      name="id_discipline"
      v-model="selectedID"
      placeholder="Data id value of clicked"
    />
    <input
      @input="onChange"
      list="disciplines"
      id="disciplines-list"
      class="form-control"
      placeholder="Seleccionar disciplina"
    />
    <datalist id="disciplines">
      <option
        v-for="discipline in disciplines"
        :key="discipline.id_discipline"
        :data-value="discipline.id_discipline"
        >{{ discipline.name }}</option
      >
    </datalist>
  </div>
</template>

脚本部分：

<script>
export default {
  data() {
    return {
      selectedID: "",
      id_discipline: "",
      disciplines: [
        {
          id_discipline: 1,
          name: "Yoga"
        },
        {
          id_discipline: 2,
          name: "Functional"
        }
      ]
    };
  },
  methods: {
    onChange(e) {
      this.getID(e.target.value).then(
        resposnse => (this.selectedID = resposnse)
      );
    },
    async getID(value) {
      let promise = new Promise((resolve, reject) => {
        this.disciplines.forEach(item => {
          if (item.name === value) resolve(item.id_discipline);
        });
      });

      return await promise;
    }
  }
};
</script>

这里是working Sandbox demo。

**限制：学科名称（瑜伽，功能性）应唯一。

用v-for检索被单击元素的数据属性值

1 个答案: