Question

我正在尝试使用下拉按钮创建一个顶级菜单，当迭代一个看起来像这样的对象时：

links: {
      store: 'store',
      language: [{'target': '/english'},{'target': '/norwegian'}],
      login: 'user/login'
    }

我试图通过制作一个如下所示的循环来实现这一目标：

       <div v-for="(value, key) in links" :key="key" class="control">
            <div v-if='Array.isArray(value)'>
                <dropdown-menu :menu="value"></dropdown-menu>
            </div>
            <div v-else>
                <a :href="value">
                    {{ key }}
                </a>
            </div>
        </div>

但是，我得到错误：

属性或方法“value”未在实例上定义，但是在渲染期间引用。确保声明反应数据数据选项中的属性。

即使我声明值和键的初始值为null，它也不会呈现任何内容：

data() {
  return {
    data: null,
    value: null,
    key: null,
  };
},

这是下拉菜单组件：

<template>
  <div class="dropdown is-active">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
        <span>Dropdown button</span>
        <span class="icon is-small">
          <i class="fa fa-angle-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <a href="#" class="dropdown-item">
          Dropdown item
        </a>
        <a class="dropdown-item">
          Other dropdown item
        </a>
        <a href="#" class="dropdown-item is-active">
          Active dropdown item
        </a>
        <a href="#" class="dropdown-item">
          Other dropdown item
        </a>
        <hr class="dropdown-divider">
        <a href="#" class="dropdown-item">
          With a divider
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'dropdown-menu',
    props: ['menu'],
    data() {
      return {};
    },
  };
</script>

但是，当我转到顶栏组件时，vue dev工具中甚至没有显示下拉菜单。

更新

出于某种原因，如果我删除了div，并将模板更改为：

<dropdown-menu v-if='Array.isArray(value)' :menu="link"></dropdown-menu>
<a :href="value" v-else>
     {{ key }}
</a>

如果有人能够解释，那就太好了。

对于不起作用的对象的循环Vue

0 个答案: