Cannot modify prop dockKeepMaximized

[minhtu-cloudtek]

I declared prop dockKeepMaximized and dockBringToFront with value as true in BalloonSet component. I check them in Vue dev tool, they are still false?

[kevinwarne]

Just tested this and it seems to be working ok.

    <balloon-set
      position = 'bottom-right'
      :balloons = 'balloons'
      :dock-keep-maximized = 'true'
      :dock-bring-to-front = 'true'
    >
      <template scope = 'balloon'>
        <youtube :video-id = 'balloon.videoId' class = 'video'>
        </youtube>
      </template>
    </balloon-set>

[minhtu-cloudtek]

Hi, Thank you for your reply.

I realized that I i set the prop ballloons with empty array (:balloons="[]") in the beginning, then I push object into the balloons array to create one. The balloon of course was created but the 2 props dockKeepMaximized and dockBringToFront kept the value as false. Was that the problem.

However, according to your reply, :dock-keep-maximized = 'true' and :dockKeepMaximized='true', which is the right one to use?

Hope to get your reply soon, Thank you!

[kevinwarne]

Happy to hear you got it worked out. Both casing formats should work but the hyphen separated one is the more “vue” way to do it.

You can read about the preferred component prop casing here https://vuejs.org/v2/guide/components-props.html.

Cheers!

[kevinwarne]

Oops, I didn't answer your first question sorry. I just tested the scenario you described when the balloons prop begins as an empty array. This does not affect the dockBringToFront or dockKeepMaximized flags, the remain true before and after pushing a new balloon onto the array

Here's the code I tested with:

  <div id = 'demo'>
    <!-- load font awesome dependency -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <balloon-set
      position = 'bottom-right'
      :balloons = 'balloons'
      :dock-keep-maximized = 'true'
      :dock-bring-to-front = 'true'
    >
      <template scope = 'balloon'>
        Hello my name is: {{ balloon.name }}
      </template>
    </balloon-set>
  </div>
</template>

<script>
  import { BalloonSet } from '../src/index'

  export default {
    components: {
      BalloonSet
    },

    created () {
      setTimeout(() => {
        this.balloons.push({ key: 2, name: 'John', title: 'Johns Balloon' })
      }, 1000)
    },

    data () {
      return {
        balloons: []
      }
    }
  }
</script>

<style>
  .video,
  .video iframe {
    height: 100%;
    width: 100%;
  }

  .vb-content-slot {
    overflow: hidden;
  }
</style>

[minhtu-cloudtek]

Thank you for your answer, you were right. It still works. My problem was the :dock-keep-maximized = 'true' works but the :dockKeepMaximized='true' doesn't. Can you check?

By the way, you should amend your document, at the "Component: BalloonSet" section, because I didn't find the code :dock-keep-maximized = 'true' and :dock-bring-to-front = 'true' in your document. So, they are easy to be confused with :dockKeepMaximized='true' and :dockBringToFront='true'.

[kevinwarne]

I can see the confusion from that. However, the prop names are actually dockKeepMaximized and dockBringToFront. It's just, when used in the template they need to be referenced by their kabab case form. This is the convention of how they are generally described in vue documentation. See vue-multiselect https://vue-multiselect.js.org/#sub-props for another example that uses the same convention. Glad you got it working though! Cheers