Vue限制数组中真实元素的数量答案

【问题标题】：Vue limit the number of true elements in arrayVue限制数组中真实元素的数量
【发布时间】：2020-10-28 03:25:51
【问题描述】：

我正在寻找一种解决方案来动态观察带有 vue 中对象的数组的值：

new Vue({
  el: "#app",
  data: {
      options: [
          {"id": 1, "title": "One", "value": false},
          {"id": 2, "title": "Two", "value": false },
          {"id": 3, "title": "Three", "value": false}
      ]
  },

我用watch 和methods 尝试了不同的解决方案，但没有一个能正常工作。如何查看“选项”中的对象以更改“值”并将真实对象的最大数量限制为在这种情况下为 1 的数字。如果我将第二个对象设置为 true，则第一个对象需要设置为 false，以便只有最后更改的对象为 true？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

你只需要更新options，像这样（如果是limit: 1）：

new Vue({
  el: "#app",
  data: {
    limit: 1, // this is not used in this snippet!
    options: [{
        "id": 1,
        "title": "One",
        "value": false
      },
      {
        "id": 2,
        "title": "Two",
        "value": false
      },
      {
        "id": 3,
        "title": "Three",
        "value": false
      }
    ]
  },
  methods: {
    setToTrue(id) {
      // creating a copy of the options data object
      let options = JSON.parse(JSON.stringify(this.options))
      this.options = options.map(e => {
        const value = e.id === id ? true : false
        return { ...e, value }
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="option in options" :key="option.id">
    ID: {{ option.id }}<br />
    Title: {{ option.title }}<br />
    Value: <span style="font-weight: 700; cursor: pointer;" @click="setToTrue(option.id)">{{ option.value }}</span><br />
    <hr />
  </div>
</div>

对于更高的限制（例如您允许 2 个或更多 true 值），您需要提出关于保留哪些值的规则集（除了新的） - 策略（规则集）可以是先进先出、后进先出等

【讨论】：

【解决方案2】：

计算属性可以解决问题：

...
data: () => ({
  options: [...], // your current options
  trueValuesLimit: 2 // If you want to set the limit as data a property
})
computed: {
  // If limitOn is true, then at least one value property is true
  limitOn() {
    const count = this.options.reduce((acc, option) => {
      // If value is true, then add one to the accumulator
      option.value ? acc++ : null
      return acc
    } , 0)
    // Limit sets to 1, update as required
    return count >= 1

    // You can use a data property to validate the limit
    // return count >= this.trueValuesLimit
  }
}
...

现在您可以使用 limitOn 属性来启用/禁用输入以选择/取消选择选项。

【讨论】：

您的计数器当然是一个很好的功能，并且在某些情况下可能很有用。但是我需要使用此函数将“选项”中的所有其他对象设置为 false 我只有一个新的数据对象 limitOn 根据我的值限制设置为 true。
所以，你只想有一个值为真，我的意思是，选择选项一，二和三将是假，而选择选项二，一和三将是假，同样单选按钮的行为，对吗？
我想出了这个this 解决方案，你会看到同时只有一个值可以为真，它适用于来自buefy 的b-switch 元素，很遗憾不能在这里显示.我已将您的答案标记为正确，因为即使我最终选择了一些不同的解决方案，这也是我所要求的。