使用 javascript 编码选择模式为 Windows 的最佳方法是什么？

Question

当您单击文件夹一次时，您可以 select 中的文件夹 windows..

我正在使用 Vuejs。 我想用多个 arrays 编写相同的代码，我从我的数据库中获取并使用v-for公开

我正在考虑的是为每个数组添加一个新列（选择），默认value = 0 。 Then i can apply a function on-click on each array to change it's select value to value = 1 and i can also add a css class to distinct the selected element (Blue border color).

此时，列 select value = 1的我的元素被选中。

当您想要更改选择（选择另一个数组）时，它变得更加复杂。 我需要首先使所有列（选择） value = 0 ，其次，在重新启动操作之前删除所有 css 类。 （因为只能选择一个元素）

有什么建议吗？ 谢谢

Answer 1

Vue.js 非常简单。 您不需要任何特殊的东西，例如列左右。 您只需要正确设置ViewModel 。 您的模板将是：

<div>
  <!-- Note the use of dynamic :class bindings -->
  <div v-for="folder in list" class="folder-item" :key="folder.id"
    @click="onClick(folder)"
    :class="{ 'folder-item__active': folder === selected }">
      <span>{{ folder.folderName }}</span>
  </div>
</div>

您的组件的 JavaScript 将是：

Vue.extend({

  data() {
    return {
      // Initial list of folders
      list: [
        { folderName: 'Folder 1', id: 1 /* Some more data */ },
        { folderName: 'Folder 2', id: 1 /* Some more data */ },
      ],

      // Important to set to null for Vue.js to track reactivity
      selected: null
    };
  },

  mounted() {

    // Later on change the folder list
    setTimeout(() => {
      this.list = [/* Some new list */]
      this.selected = null;
    }, 3000);
  },

  methods: {
    onClick(selectedItem) {
      this.selected = selectedItem;
    }
  }
});

需要注意以下三点：

1. 使用动态:class绑定。
2. 使用@click事件处理程序来跟踪选定的文件夹。
3. 每当您更改list时，只需将selected值更改为null 。 （在内部，比较引用以检测变化非常简单和容易。）

当然，如果您的列表由于使用不可变数据而不断变化，那么您的active文件夹选择逻辑将失败。 在这种情况下，您可以依赖一些唯一标识符并相应地更新代码：

<!-- Vue binding -->
:class="{ 'folder-item__active': folder.id === selected && selected.id }"