Переключить свойство, установив флажок - PullRequest
Новая
       24

Переключить свойство, установив флажок

0 голосов
/ 10 октября 2018

Извините заранее, если я плохо объясняю это, я немного новичок в этом.

Если у меня есть массив, который содержит несколько объектов, аналогичных приведенным ниже, как в Vue отменить выбор /установите флажок в модальном режиме, чтобы переключать значение свойства visible в зависимости от его имени?Я просто хочу показать элементы с видимым значением true.

В настоящее время у меня есть модальное всплывающее окно, которое отображает свойство имени для каждого объекта вместе с флажком.Когда я снимаю флажок / проверяю текстовое поле рядом с одним или несколькими именами, я хотел бы, чтобы список, который я должен обновить, основывался на 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},
           ]

1 Ответ

0 голосов
/ 10 октября 2018

Я попытался смоделировать решение, соответствующее вашему случаю, карта ниже представляет модальное значение, и когда вы отметите / снимите флажок, значение в вашей таблице будет изменено, вы также сможете скрыть / показать элемент в соответствии с * 1001.* состояние как: 

   <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;
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

   <div id="app" class="container">
     <section v-for="item in myArray" >
        <div class="flex">
          <div>{{item.name}}</div>
          <div>{{item.value}}</div>
          <div>{{item.another}}</div>
          <div>{{item.high}}</div>
          <div>{{item.low}}</div>
           <div>{{item.visible}}</div>
          <div><button class="btn btn-primary" @click="selectedItem=item"> Show details</button></div>
        </div>
      </section>
    

    <div class="mymodal" v-if="selectedItem.visible">
        <input type="checkbox"
               v-model="selectedItem.visible" @change="setVisible">
        <label for="cad">{{selectedItem.name}}</label>
    </div>
    </div>
...