Question

对不起，如果我对此解释不佳，那么我有点新手。

如果我有一个包含多个类似于以下对象的数组，如何在Vue中取消选择/选中模式中的复选框以根据其名称来切换visible属性的值？我只想显示可见的项目。

当前，我有一个模式弹出窗口，显示每个对象的name属性以及一个复选框。取消选中/选中一个或多个名称旁边的文本框时，我想根据visibility更新列表。

我想像的是逻辑； 如果未选中此复选框，则将可见性设置为false

下面的代码基本上是我要解释的内容的概述，我知道它不是语法完美的，它更像是直观的指南，以尝试展示我的要求。

再次，抱歉，如果我对此解释不佳。

非常感谢您的帮助

<!-- this would be in my modal -->
    <div>
        <input type="checkbox"
               value="usd" />
        <label for="usd">USD</label>
    </div>
        <div>
        <input type="checkbox"
               value="cad"/>
        <label for="cad">CAD</label>
    </div>
<!-- End modal -->

<section v-for="loop through MyArray" v-show="myArray.visible">
  <div>{{name}}</div>
  <div>{{value}}</div>
  <div>{{another}}</div>
  <div>{{high}}</div>
  <div>{{low}}</div>
</section>

    myArray[
            {
             name:"USD",
             value: 0.75,
             another: 0,
             high: 0,
             low: 0,
             visible:true},
            {
             name:"CAD",
             value: 1.75,
             another: 0,
             high: 0,
             low: 0,
             visible:true},
           ]

Answer 1

我尝试模拟一种适合您情况的解决方案，下面的卡代表模式，当选中/取消选中复选框时，表中的值将被更改，您还根据其{{ 1}}状态如：

visibility

   <div class="flex" v-if="item.visible">...</div>

new Vue({
  el: '#app',

  data() {
    return {
     myArray:[
            {
             name:"USD",
             value: 0.75,
             another: 0,
             high: 0,
             low: 0,
             visible:true},
            {
             name:"CAD",
             value: 1.75,
             another: 0,
             high: 0,
             low: 0,
             visible:true},
           ],
           selectedItem:{visible:false}
     
     }
  },
 methods:{
       setVisible(){
    
      this.myArray= this.myArray.filter((item)=>{
        if(item.name===this.selectedItem.name){
       item.visible=this.selectedItem.visible;
       return item;
        }else{ return item}
       
       })
       }
  }
  
  });

.flex{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px;
}

.mymodal{
padding:50px;
box-shadow:1px 1px 4px #555;
}

通过切换复选框来切换属性

1 个答案: