mardi 9 octobre 2018

Toggle an object's property by unchecking a checkbox in Vue

Sorry in advance if I'm explaining this poorly, I'm a bit of novice at this.

If I have an array that contains multiple objects similar to below, how in Vue do I unselect/select a checkbox in a modal to toggle the value of the visible property based on it's name? I just want to show items that have a visible of true.

Currently, I have a modal popup that displays the name property for each object along with a checkbox. When I uncheck/check the textbox beside one or mutiple of the names, I would like the list I have to update, based on the visibility.

I'm picturing the logic to be; "if checkbox unchecked, set visibility to false"

The code below is basically an outline to what I'm trying to explain, I know it's not syntax perfect, it's more of a visual guide to try and show what I'm asking.

Again, sorry if I'm explaining this poorly.

Thanks so much for any help

<!-- 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></div>
  <div></div>
  <div></div>
  <div></div>
  <div></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},
           ]




Aucun commentaire:

Enregistrer un commentaire