Получить значение атрибута данных выбранного элемента с помощью v-for - PullRequest
Новая
       7

Получить значение атрибута данных выбранного элемента с помощью v-for

0 голосов
/ 05 февраля 2019

Я создал список данных, который заполняется динамически, и он работает правильно.

Теперь мне нужно прослушать событие click для параметров, чтобы получить значение идентификатора данных и поместить его в качестве значения во входные данные.скрыто.

Я уже пробовал с 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!);
    } 
},

1 Ответ

0 голосов
/ 05 февраля 2019

Использование 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>

Вот рабочая демонстрационная версия Песочницы .

** Ограничение: Название дисциплины (йога, функционал) должно быть уникальным.

...