Vue JS - Запретить изменение всех выбранных опций при нажатии - PullRequest
Новая
       35

Vue JS - Запретить изменение всех выбранных опций при нажатии

0 голосов
/ 02 июня 2019

Я только начинаю с VUE.

Я просмотрел SO для ответов, но пока не смог их найти ...

У меня есть таблица, которая заполняется из базы данных.В одном из столбцов у меня есть меню выбора, в котором есть различные параметры.

Я использую Vue-multiselect для параметров выбора.

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

  1. Как мне сделать так, чтобы при щелчке по одному варианту в одной строке все они не менялись.

Во-вторых, можно ли привязать функцию метода к любой из строк опций - я пробовал это с библиотекой и без нее и безуспешно?

Как связать метод с опцией.

Заранее благодарен за помощь!

VUE HTML 

<div class="table-wrapper">
    <table class="table table-hovered">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Headline</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="note in notes" :key="note._id">
          <td>{{ note.headline }}</td>
          <td>
            <Multiselect
              id="example"
              v-model="value"
              :options="options"a
              :close-on-select="false"
              :clear-on-select="false"
              :hide-selected="true"
              :preserve-search="true"
              placeholder="Choose and option"
              label="name"
              track-by="name"
              :preselect-first="true"
              :searchable="false"
              @select="onSelect(note._id)"
            >
            </Multiselect>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

VUE SCRIPT 

import Multiselect from "vue-multiselect";

    export default {
      components: { Multiselect },
      data: () => ({
        selected: null,
        options: [
          { name: "Delete", action: "delete" },
          { name: "Publish", action: "publish" },
          { name: "Edit", action: "edit" }
        ],
      }),
      methods: {
       delete(id) {
        console.log(id)
        // run function
       }
     }
    }
...