汉堡菜单问题，按钮不起作用

Question

有2个文件，一个是vue，第二个是js。 js文件包含一个数组，问题是在控制台中描述的，除此之外，可能是items有问题，因为控制台会向它发出相同的错误。我附上下面的代码 enter image description here

js文件

import Vue from "vue";

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

vue 文件“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: 'Пряжа', url: '#'},
        {name: 'Спицы', url: '#'},
        {name: 'Крючки', url: '#'},
        {name: 'Аксессуары', url: '#'},
        {name: 'Подарочные сертификаты', url: '#'},
        {name: 'МК и описания', url: '#'},
        {name: 'Модели', url: '#'},
      ], show: false
    }
  },
  name: 'TopHead',
  methods: {
    switchShow() {
      this.show = this.show === false;
    }
  }
}
</script>

Answer 1

数据需要是一个函数，returns一个对象。

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

编辑：啊，我刚刚看到您正在尝试将 .js 文件与 .vue 文件合并。

Vue 给你一个错误，因为在 TopHead.vue 中没有“项目”。您需要将 data() {} 从 .js 文件移动到 .vue 文件，或更改项目并显示道具。

这里我把它们改成了道具：

<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'],
      }
    }
});

在您的 .vue 文件中：

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

Answer 2

使用 props 时，如果您尝试在接收 prop 的组件内部改变它们，而不是将新值传递给父级并在那里改变它，则可能会出错。问题显示在这里：

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

在这种情况下 @click="show = !show" 单击事件会改变 show 的值。有两种方法可以解决这个问题。

Approach: Use show localy 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>

要在您的组件中改变 show，您现在可以使用 switchShow 函数。在您的图标上，您可以像这样简单地使用它：

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

Approach: 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">clear</i>

这就像在父级上调用一个函数（需要单独编写）来处理show的突变。如果父级在一个函数中改变它，可能与我们在方法 1 中所做的方式相同，那么它将通过 props 向下传递它的新值。

我建议您使用方法 1，因为它更容易理解，并且只要没有其他组件使用 show，您就可以将它从您的父组件重新定位到您的组件。

编辑新发生的错误

由于在使用v-if的同时需要使用v-model:key，因此需要提供一个唯一标识符。问题是这样的：

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

...和...

items: [
    {name: 'Пряжа', url: '#'},
    {name: 'Спицы', url: '#'},
    {name: 'Крючки', url: '#'},
    {name: 'Аксессуары', url: '#'},
    {name: 'Подарочные сертификаты', url: '#'},
    {name: 'МК и описания', url: '#'},
    {name: 'Модели', url: '#'},
  ], show: false
}

items 中的每一项都是一个对象。如果您尝试将它们用作键，它们只会像 [object Object] 一样打印出来，无论它们的值是否不同。要解决这个问题，只需使用其中一个对象值，就像您在 <a> 标签上所做的那样：

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

汉堡菜单问题，按钮不起作用

Problem with burger menu, button not working

javascript

vue.js

vue-component

vuejs2