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 https://i.sstatic.net/AYKAK.png

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

What is the best way to extract a list of particular items from a nested array?

Tips for integrating JavaScript code into React JS applications

Using the factory pattern in a Node.js (Express) application

Calling gtag("event") from an API route in NextJS

Tapping into the space outside the MUI Modal Component in a React application

Can a single volume control be used to manage the audio of multiple sources at once?

How to toggle hidden links with AngularJS or vanilla JavaScript with a click事件

Performance problem with 'Point-along-path' d3 visualization

What is the best approach for addressing null values within my sorting function?

Template does not recognize the content of computed property, however it is successfully logged in the lifecycle hook

Can an in-progress NPM package be tested using NPX?

When the return false statement is included, the form fails to submit and instead refreshes on the current page

Wait for AngularJS to load when the background image of a div becomes visible

The troubleshooting of a find method in Mongoose

JS is programmed to automatically redirect the user after they have clicked on a div element and a

Discord.js: Merging strings while pushing to an array

Twilio's phone calls are programmed to end after just 2 minutes

Automatically update div content using AJAX in a different approach

Troubleshooting Material-UI: The Mystery of the Missing Dialog

Dealing with incorrect routes found in both documents