VueJS：过滤选择列表

Question

我有一个 VueJS 应用程序。我有两个列表：A，B

• A 包含所有元素
• B 包含来自 A 的一些元素

我有<select> 标签。每个 select 标记必须保存 B 元素的值，并且应该可以选择 B 中不包含的 A 的其他值。

问题：如何正确过滤 A 中不存在于 B 中的元素，但标记当时选择的元素除外？一个通用的解决方案是遍历每个元素并从列表中取消设置不需要的元素。问题是 Vue 具有响应式属性，这意味着当我更改自定义选择的列表时，更改也会传播到其他选择。

我已经包了一个多小时了。我相信我正在为一个简单的问题构建场景，它有一个简单的解决方案，但我找不到它。请帮助我。

const app = new Vue({
  el: '#app',
  data() {
    return {
      b: [],
      a: [
        1, 2, 3, 4, 5
      ],
    }
  },
  methods: {
    filterElements() {
      return this.a.filter((a, a_index) => {
        return !this.b.find((b, b_index) => {
          return a === b
        })
      })
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <template v-for="i in b.length">
	<select v-model="b[i-1]">
	    <option value="0" disabled>Select a value</option>
	    <!--<option v-for="(item, index) in filterElements()" :value="item">{{ item }}</option> doesn't work -->
	    <option v-for="(item, index) in a" :value="item">{{ item }}</option>
	</select>
	<br>
			
  </template>
  <br>
  <button @click="b.push(0)">+</button>
  <br>
  <br>
  <div>Selected elements: {{ b.join(', ') }}</div>
</div>

Answer 1

您可以简单地使用计算属性来包含 A 的过滤版本

要跟踪 B 中的更改，您必须使用 $set 来更新 B 中的元素。 否则 B 不会反应。更多信息在这里，https://vuejs.org/v2/guide/reactivity.html#For-Arrays

const app = new Vue({
  el: '#app',
  data() {
    return {
      b: [],
      a: [
        1, 2, 3, 4, 5
      ],
    }
  },
  computed: {
    filteredA() {
      return this.a.filter((a, a_index) => {
        return !this.b.find((b, b_index) => {
          return a === b
        })
      })
    }
  },
  methods: {
    updateB(e, i) {
      // use $set to update array elements to maintain reactivity
      this.$set(this.b, i, +e);
    }
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <template v-for="i in b.length">
	<select :value="b[i-1]" @input="updateB($event.target.value, i-1)">
            <option :value="b[i-1]">{{b[i-1] || "Select a value"}}</option>
	    <!--<option v-for="(item, index) in filterElements()" :value="item">{{ item }}</option> doesn't work -->
	    <option v-for="(item, index) in filteredA" :value="item" :key="`${item}-${index}`">{{ item }}</option>
	</select>
	<br>
			
  </template>
  <br>
  <button @click="b.push(0)">+</button>
  <br>
  <br>
  <div>Selected elements: {{ b.join(', ') }}</div>
</div>

Answer 2

无需手动过滤。这是一个循环您的 a 数组并将所选值绑定到 b 的解决方案：

https://stackoverflow.com/a/50648659/13602136

Answer 3

如果我理解正确，您想做一个数组减法（A 中的元素不在 B 中）：

function aNotInB(a, b) {
  return a.filter(aElement => {
    // .find() returns undefined if nothing is found
    // (b.find(element) === undefined) returns true if a element is not found in b
    return b.find(bElement => aElement === bElement) === undefined
  })
}

a = [1, 2, 3, 4, 5]
b = [2, 3, 4]


console.log(aNotInB(a,b))    // [1, 5]