Issue with burger menu functionality, button unresponsive

Question

Issue with burger menu functionality, button unresponsive

Two files are involved in this issue, one is a Vue file and the other is a JavaScript file. The JavaScript file contains an array and the problem is being described in the console. Additionally, there may be an issue with items as sometimes the same error is encountered for them as well. Below is the code snippet: enter image description here

JavaScript file:

import Vue from "vue";

new Vue ({
    el: 'TopHead',
    show:false
});

Vue file named "TopHead":

<transition name="fade" mode="out-in">
    <i class="material-icons menu" v-if="!show" @click="switchShow" key="menu">menu</i>
    <i class="material-icons clear" v-else @click="switchShow" key="clear">clear</i>
  </transition>
  <transition name="fade">
    <ul v-if="show">
      <li v-for="item in items" :key="item"><a :href="item.url">{{ item.name }}</a></li>
    </ul>
  </transition>
<script>

export default {
data: function () {
return {
items: [
{name: 'Yarn', url: '#'},
{name: 'Needles', url: '#'},
{name: 'Hooks', url: '#'},
{name: 'Accessories', url: '#'},
{name: 'Gift Certificates', url: '#'},
{name: 'Patterns and Descriptions', url: '#'},
{name: 'Models', url: '#'},
], 
show: false
}
},
name: 'TopHead',
methods: {
switchShow() {
this.show = !this.show;
}
}
}
</script>

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Errors can occur when working with props if you try to change them within the component that receives the prop, instead of passing the new value to the parent and changing it there. The issue is highlighted in this code snippet:

<i class="material-icons menu" v-if="!show" @click="show = !show" key="menu">menu</i>

The line @click="show = !show" mutates the value of show on click event. There are two solutions to this problem.

Solution: Use show locally in your component

<script>
export default {
  data: function () {
    return {
      items: ['1','2','3'],
      show: false
    }
  },
  name: 'TopHead',
  methods: {
    switchShow() {
      this.show = this.show === false;
    }
  }
}
</script>

To modify show in your component, use the switchShow function. Simply utilize it on your icon like this:

<i class="material-icons clear" v-else @click="switchShow" key="clear"gt;clear</i>

Solution: Emit the change to the parent

<script>
export default {
  data: function () {
    return {
      items: ['1','2','3']
    }
  },
  props: {
    show: Boolean
  },
  name: 'TopHead',
  methods: {
    emitShow() {
      this.$emit('emit-show');
    }
  }
}
</script>

<i class="material-icons clear" v-else @click="emitShow" key="clear"gt;clear</i>

This involves calling a function on the parent to handle the mutation of show. If the parent changes it within a function, similar to approach 1, then it will pass down the new value through props.

I suggest using approach 1 as it is easier to understand, and if no other component uses show, you can keep it within your component rather than in the parent.

Edit for newly encountered error

If you are using v-model:key with v-if, you must provide a unique identifier. The error lies here:

<li v-for="item in items" :key="item"gt;

... and ...

items: [
    {name: 'Yarn', url: '#'},
    {name: 'Needles', url: '#'},
    {name: 'Hooks', url: '#'},
    {name: 'Accessories', url: '#'},
    {name: 'Gift Certificates', url: '#'},
    {name: 'Patterns and descriptions', url: '#'},
    {name: 'Models', url: '#'},
  ], show: false
}

Each item in items is an object. When used as a key, they display as [object Object], regardless of their values. To fix this, simply use one of the object's values, like you did with the <a> tag:

<li v-for="item in items" :key="item.name"gt;

Answer 2

Errors can occur when working with props if you try to change them within the component that receives the prop, instead of passing the new value to the parent and changing it there. The issue is highlighted in this code snippet:

<i class="material-icons menu" v-if="!show" @click="show = !show" key="menu">menu</i>

The line @click="show = !show" mutates the value of show on click event. There are two solutions to this problem.

Solution: Use show locally in your component

<script>
export default {
  data: function () {
    return {
      items: ['1','2','3'],
      show: false
    }
  },
  name: 'TopHead',
  methods: {
    switchShow() {
      this.show = this.show === false;
    }
  }
}
</script>

To modify show in your component, use the switchShow function. Simply utilize it on your icon like this:

<i class="material-icons clear" v-else @click="switchShow" key="clear"gt;clear</i>

Solution: Emit the change to the parent

<script>
export default {
  data: function () {
    return {
      items: ['1','2','3']
    }
  },
  props: {
    show: Boolean
  },
  name: 'TopHead',
  methods: {
    emitShow() {
      this.$emit('emit-show');
    }
  }
}
</script>

<i class="material-icons clear" v-else @click="emitShow" key="clear"gt;clear</i>

This involves calling a function on the parent to handle the mutation of show. If the parent changes it within a function, similar to approach 1, then it will pass down the new value through props.

I suggest using approach 1 as it is easier to understand, and if no other component uses show, you can keep it within your component rather than in the parent.

Edit for newly encountered error

If you are using v-model:key with v-if, you must provide a unique identifier. The error lies here:

<li v-for="item in items" :key="item"gt;

... and ...

items: [
    {name: 'Yarn', url: '#'},
    {name: 'Needles', url: '#'},
    {name: 'Hooks', url: '#'},
    {name: 'Accessories', url: '#'},
    {name: 'Gift Certificates', url: '#'},
    {name: 'Patterns and descriptions', url: '#'},
    {name: 'Models', url: '#'},
  ], show: false
}

Each item in items is an object. When used as a key, they display as [object Object], regardless of their values. To fix this, simply use one of the object's values, like you did with the <a> tag:

<li v-for="item in items" :key="item.name"gt;

Answer 3

Answer №2

It is necessary for data to be a function that returns an object.

//...
data() {
  return {
    items: ['1'],
    show: false
  }
}

UPDATE: I just noticed that you are attempting to combine a .js file with a .vue file.

Vue is producing an error because TopHead.vue does not have "items" defined. You can either transfer the data() {} from the .js file to the .vue file, or change items and show to props.

Here's how I changed them to props:

<div id="TopHead">
  <top-head :items="myExternalItems"/>
</div>

// in your .js file
import TopHead from './TopHead.vue'
new Vue ({
    el: 'TopHead',
    components: {
       TopHead
    },
    data() {
      return {
        myExternalItems: ['1'],
      }
    }
});

In your .vue file:

export default {
  props: ['show', 'items']
}

Answer 4

It is necessary for data to be a function that returns an object.

//...
data() {
  return {
    items: ['1'],
    show: false
  }
}

UPDATE: I just noticed that you are attempting to combine a .js file with a .vue file.

Vue is producing an error because TopHead.vue does not have "items" defined. You can either transfer the data() {} from the .js file to the .vue file, or change items and show to props.

Here's how I changed them to props:

<div id="TopHead">
  <top-head :items="myExternalItems"/>
</div>

// in your .js file
import TopHead from './TopHead.vue'
new Vue ({
    el: 'TopHead',
    components: {
       TopHead
    },
    data() {
      return {
        myExternalItems: ['1'],
      }
    }
});

In your .vue file:

export default {
  props: ['show', 'items']
}

Issue with burger menu functionality, button unresponsive

Answer №1

Answer №2

Similar questions

Guide on transmitting data between NextJS and MongoDB

Prevent animations on child elements with Vue.js

What could be the reason for the counter not being incremented when the button is clicked

This error message in AngularJS indicates that the argument 'fn' is not being recognized as a function

What is the best way to retrieve an element that has been altered in its state?

Strange Reselect selector actions

Performing asynchronous ajax calls with jQuery

Attempting to grasp the intricacies of HTML5/JS video playback quality

The navigation bar options are not collapsing as intended

Dockerfile unable to recognize environment variable

The functionality of react-waypoint's onEnter/onLeave event handlers seems to be malfunctioning

Validate selected checkbox using JavaScript

Who is the intended audience for the "engines" field in an npm package - consumers or developers?

Seeking assistance in configuring a dynamic payment amount feature on Stripe using Node.js

Even in report-only mode, Content Security Policy effectively blocks the execution of inline scripts

Angular connecting to the count of filtered items

"Make sure to tick the checkbox if it's not already selected,

Loading data table rows dynamically using Vuetify

Retrieving and storing successful response data in Angular JS using the $http service caching

Verify the password by checking each character as you type