Vue Component, switching state

Question

Vue Component, switching state

Feeling like I'm losing it, this should be really simple but it's not working...

The idea is that when the link is clicked, the display property toggles between true and false. However, it's not working as expected.

Vue.component('dropdown', {
    props: [ 'expanded' ],
    data: function() {
      return {
        display: !!(this.expanded)
      }
    },
    template: '<div><transition name="expand"><slot :display="display"></slot></transition></div>'
  });
  window.app = new Vue({
   el: '#app'
  });

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <dropdown>
      <div slot-scope="{ display }">
        <a href="javascript:void(0)" @click="display = !display">Toggle {{ display }}</a>
        <div v-if="display">
          Dropdown content
        </div>
      </div>
  </dropdown>
</div>

Edit:

Updated code, I can't believe I missed that, I did in fact have the click event set to display = !display. But still, if you try clicking the button, you'll see that it doesn't change to true either...

javascript vue.js

Answer 1

Answer №1

After receiving a helpful comment from thanksd, I was able to update my solution even though I didn't fully grasp it at first.

The issue here is that within the slot, the reference to display pertains to an item in the scope-slot object. Modifying it there does not affect the original source variable. Instead, passing in and invoking a function will update the correct variable.

Vue.component('dropdown', {
  props: ['expanded'],
  data: function() {
    return {
      display: Boolean(this.expanded)
    }
  },
  methods: {
    toggle() {
        this.display = !this.display;
    }
  },
  template: '<div><transition name="expand"><slot :display="display" :toggle="toggle"></slot></transition></div>'
});

new Vue({
  el: '#app'
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <dropdown>
    <div slot-scope="{display, toggle}">
      <a href="javascript:void(0)" @click="toggle">Toggle {{ display }}</a>
      <div v-if="display">
        Dropdown content
      </div>
    </div>
  </dropdown>
</div>

Answer 2

After receiving a helpful comment from thanksd, I was able to update my solution even though I didn't fully grasp it at first.

The issue here is that within the slot, the reference to display pertains to an item in the scope-slot object. Modifying it there does not affect the original source variable. Instead, passing in and invoking a function will update the correct variable.

Vue.component('dropdown', {
  props: ['expanded'],
  data: function() {
    return {
      display: Boolean(this.expanded)
    }
  },
  methods: {
    toggle() {
        this.display = !this.display;
    }
  },
  template: '<div><transition name="expand"><slot :display="display" :toggle="toggle"></slot></transition></div>'
});

new Vue({
  el: '#app'
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <dropdown>
    <div slot-scope="{display, toggle}">
      <a href="javascript:void(0)" @click="toggle">Toggle {{ display }}</a>
      <div v-if="display">
        Dropdown content
      </div>
    </div>
  </dropdown>
</div>

Answer 3

Answer №2

One way to solve this issue is by introducing a custom v-model for the dropdown component, allowing a two-way binding of the display property with a property in its parent component. This eliminates the need to pass any data through the slot-scope.

Check out this example:

Vue.component('dropdown', {
  props: [ 'value' ],
  data() {
    return {
      display: !!(this.value)
    }
  },
  watch: {
    value(value) {
      this.$emit('input', value);
    }
  },
  template: '<div><transition name="expand"><slot></slot></transition></div>'
});

new Vue({
  el: '#app',
  data() {
    return { dropdownToggle: false }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <dropdown v-model="dropdownToggle">
      <div>
        <a href="javascript:void(0)" @click="dropdownToggle = !dropdownToggle">
          Toggle {{ dropdownToggle }}
        </a>
        <div v-if="dropdownToggle">
          Dropdown content
        </div>
      </div>
  </dropdown>
</div>

Answer 4

One way to solve this issue is by introducing a custom v-model for the dropdown component, allowing a two-way binding of the display property with a property in its parent component. This eliminates the need to pass any data through the slot-scope.

Check out this example:

Vue.component('dropdown', {
  props: [ 'value' ],
  data() {
    return {
      display: !!(this.value)
    }
  },
  watch: {
    value(value) {
      this.$emit('input', value);
    }
  },
  template: '<div><transition name="expand"><slot></slot></transition></div>'
});

new Vue({
  el: '#app',
  data() {
    return { dropdownToggle: false }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <dropdown v-model="dropdownToggle">
      <div>
        <a href="javascript:void(0)" @click="dropdownToggle = !dropdownToggle">
          Toggle {{ dropdownToggle }}
        </a>
        <div v-if="dropdownToggle">
          Dropdown content
        </div>
      </div>
  </dropdown>
</div>

Vue Component, switching state

Answer №1

Answer №2

Similar questions

Is there a way to logout when the select event occurs using the key?

Loading content within the designated element

Learn how to use a function in Google Maps to calculate and display distances

Leveraging python capabilities within html documents

Environment variables in Node process are uninitialized

How come the function is being triggered by my onclick button as soon as the page loads?

What causes the fixed div to appear when scrolling horizontally?

Unable to automatically prompt the button inside the iframe

Error in Mocha test: Import statement can only be used inside a module

Is it illegal to escape quotes when using an image source attribute and onerror event in HTML: `<img src="x" onerror="alert("hello")" />`?

Recursive array generation

Leverage JavaScript Object Properties within Angular 5 Components

Differences between importing {fn1} from 'lib' and importing fn1 from 'lib'

Exploring the colors of legend navigation icons in Google Pie charts

Can a layer be sliced to create a text-shaped cutout?

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Access the contents of objects during the creation process

Is it necessary to compile Jade templates only once?

Implement the color codes specified in the AngularJS file into the SASS file

Can a single file in NextJS 13 contain both client and server components?