Reactivity in event

Question

Reactivity in event

Navigation

#1 by (1 votes)

0

I'm having a problem changing the render state of an element with vue js. The same was generated with for . The goal is to have box-body of the mini panel displayed by clicking button . but the v-if state is changed only when I trigger another click event on another element there it renders the html.

<div class="col-lg-9">
           <div class="row">
               <div v-for="(beach, index) in markers" :key="index" class="col-md-3 mx-0 px-1 my-1">
                       <div class="box box-default box-solid">
                           <div class="box-header with-border">
                               <h3 class="box-title">{{beach.label}}</h3>
                               <div class="box-tools pull-right">
                                   <button type="button" @click="beach.show =! beach.show;" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                                   </button>
                               </div>
                           </div>
                           <div v-if="beach.show">
                               <div class="box-body">
                                    <h5>{{beach.infoText}}</h5>
                               </div>
                           </div>
                       </div>
               </div>
           </div>
       </div>

javascript vue.js

asked by anonymous 27.04.2018 / 11:09

1 answer

Intellisense does not work Mount recursive function for TreeTable

score 1 · Answer 1

I started a new project with vue-create and copied your code. Apparently everything is working ok if I understood correctly.

Test with the code below. If you are experiencing problems, please send me your <script> and the problem that is occurring that I edit the message.

    <template>
      <div class="col-lg-9">
          <div class="row">
             <div v-for="(beach, index) in markers" :key="index" class="col-md-3 mx-0 px-1 my-1">
                 <div class="box box-default box-solid">
                     <div class="box-header with-border">
                         <h3 class="box-title">{{beach.label}}</h3>
                         <div class="box-tools pull-right">
                             <button type="button" @click="beach.show = !beach.show;" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                               Teste
                             </button>
                         </div>
                     </div>
                     <div v-if="beach.show">
                         <div class="box-body">
                              <h5>{{beach.infoText}}</h5>
                         </div>
                     </div>
                 </div>
               </div>
           </div>
       </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          markers: [
            {
              infoText: 'Info Test',
              show: false,
              label: 'Label Test'
            },
            {
              infoText: 'Info Test 2',
              show: false,
              label: 'Label Test 2'
            }
          ]
        }
      },
      props: {
        msg: String
      }
    }
    </script>