Reactivity in event

Asked

Viewed 55 times

0

I have a problem changing the rendering state of an element with Vue js. It was generated with a for. The goal is to get the box-body mini panel is displayed by clicking on button. however the state v-if is changed only when I trigger another event click on another element then it renders 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

1 answer

1

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

Test with the code below. If there are problems, send me your <script> and the problem that is occurring that edits 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>
  • 1

    I solved the problem by assigning a value to my props markers within data Return. That’s how it worked. I forgot to mention that I was getting the data from a props. If you know why this is happening I will be glad to see the edition.

  • Oh yes, do you have the <script> part and the array you are going through props please? For me to be able to test right, because I set up the array there in what I imagined was happening, I didn’t really touch much not.

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.