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

我正在寻找一种解决方案来动态观察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？

您只需更新

选项，如下所示（如果
限制：1
）：


newvue({
el:“应用程序”，
数据：{
限制：1，//此代码段中未使用此选项！
选项：[{
“id”：1，
“头衔”：“一个”，
“值”：false
},
{
“id”：2，
"标题":"两个",，
“值”：false
},
{
“id”：3，
"标题":"三",，
“值”：false
}
]
},
方法：{
设置图（id）{
//创建选项数据对象的副本
让options=JSON.parse（JSON.stringify（this.options））
this.options=options.map（e=>{
常量值=e.id==id？真：假
返回{…e，值}
})
}
}
})

ID:{{option.ID}}

标题：{{option.Title}}

值：{{option.Value}}


您只需更新
选项，如下所示（如果
限制：1
）：


newvue({
el:“应用程序”，
数据：{
限制：1，//此代码段中未使用此选项！
选项：[{
“id”：1，
“头衔”：“一个”，
“值”：false
},
{
“id”：2，
"标题":"两个",，
“值”：false
},
{
“id”：3，
"标题":"三",，
“值”：false
}
]
},
方法：{
设置图（id）{
//创建选项数据对象的副本
让options=JSON.parse（JSON.stringify（this.options））
this.options=options.map（e=>{
常量值=e.id==id？真：假
返回{…e，值}
})
}
}
})

ID:{{option.ID}}

标题：{{option.Title}}

值：{{option.Value}}


计算属性可以实现以下功能：

...
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属性来启用/禁用输入以选择/取消选择选项。
计算属性可以实现以下功能：

...
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，根据我的值限制，我只有一个新的数据对象限制设置为true。所以，你希望只有一个值为true，我的意思是，选择选项1，2和3将为false，选择选项2，1和3将为false，单选按钮的相同行为，对吗？我提出了这个解决方案，您将看到，在同一时间内只有一个值可以为真，并且它与buefy的
b-switch
元素一起工作，不幸的是，这里无法显示。我已经将你的答案标记为正确，因为即使最后我选择了不同的解决方案，这也是我要求的。你的计数器当然是一个很好的函数，在某些情况下可能会有用。但是我需要用这个函数将“选项”中的所有其他对象设置为false，根据我的值限制，我只有一个新的数据对象限制设置为true。所以，你希望只有一个值为true，我的意思是，选择选项1，2和3将为false，选择选项2，1和3将为false，单选按钮的相同行为，对吗？我提出了这个解决方案，您将看到，在同一时间内只有一个值可以为真，并且它与buefy的
b-switch
元素一起工作，不幸的是，这里无法显示。我已经将你的答案标记为正确，因为这正是我所要求的，即使最后我选择了一些不同的解决方案。