Question

我刚开始使用VUE。

我已经搜寻了答案，但是还没有找到答案。

我有一个从数据库填充的表。在其中一列中，我有一个选择菜单，其中包含各种选项。

我将Vue-multiselect用于选择选项。

我遇到了两个问题。当我单击选择任何选项时，所有其他行选择的输入也会更改值。

如何做到这一点，所以当我单击一行中的一个选项时，它不会更改所有选项。

第二种方法是将方法函数绑定到任何选项行上吗？-我尝试过在有库和无库的情况下都没有成功？

如何将方法绑定到选项。

在此先感谢您的帮助！

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脚本

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
       }
     }
    }

Vue JS-防止所有选择选项在点击时发生变化

0 个答案: