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

【问题标题】：What is be the best way to code selecting mode as Windows using javascript?使用javascript将选择模式编码为Windows的最佳方法是什么？
【发布时间】：2019-09-19 02:46:31
【问题描述】：

在windows中点击一个文件夹就可以选择一个文件夹了..

我正在使用 Vuejs。我想用从我的数据库中获取并使用 v-for

公开的多个数组编写相同的代码

我正在考虑的是为每个数组添加一个新列（选择），默认为value = 0。然后我可以在每个数组上单击一个函数以将其选择值更改为value = 1，我还可以添加一个 css 类来区分所选元素（蓝色边框颜色）。

此时，我的元素与列选择value = 1它被选中。

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

有什么建议吗？谢谢你

【问题讨论】：

标签： javascript vue.js

【解决方案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;
    }
  }
});

需要注意三件事：

使用动态:classbindings。
使用@click 事件处理程序来跟踪选定文件夹。
无论何时更改list，只需将selected 值更改为null。（在内部，比较参考以检测变化非常简单。）

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

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

【讨论】：

感谢您的回复，但您在何时何地定义 selectedItem ？
@yassinej，当 onClick 被调用时，Vue 会注入被点击的 item。我们从模板中提供它。