从数组数据初始化for循环中的组件

Question

尝试在 for 循环中初始化自定义元素（3 个按钮），但第一个元素缺少文本。

LeftMenu.vue

<template>
  <div id="left-menu">  
      <MenuButton v-for="mytext in buttonList" v-bind:key="mytext" v-bind:mytext="mytext"/>
  </div>
</template>

<script>
    import MenuButton from './components/MenuButton.vue'

    export default {
        name: 'left-menu',
        components: {
            MenuButton
        },
        computed: {
            buttonList() {
                return ["Test1", "Test2", "Test3"];
            }
        }
    }
</script>

<style>
    #left-menu {
        width: 200px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

MenuButton.vue

<template>
  <div id="left-menu-button">
      {{mytext}}
  </div>
</template>

<script>
    export default {
        name: 'left-menu-button',
        props: {
            mytext: String
        }           
    }
</script>

<style>
    #left-menu-button {
        width: 180px;
        height: 50px;
        margin-left: 10px;
        margin-bottom: 5px;
    }
</style>

main.js

import Vue from 'vue'
import LeftMenu from './LeftMenu.vue'
import MenuButton from './components/MenuButton.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(LeftMenu)
}).$mount('#left-menu')

new Vue({
  render: h => h(MenuButton)
}).$mount('#left-menu-button');

我是 vue 的新手，仍在尝试弄清楚所有部分是如何连接和协同工作的。我有 3 个按钮，但只有最后两个按钮有文字，而第一个按钮没有……这似乎很奇怪……也许有人可以指出我的错误。

Answer 1

您已为每个按钮分配了一个 ID left-menu-button。然后你告诉 Vue 将一些东西挂载到那个 id 中。具有该 id 的第一个元素（即第一个按钮）将被视为安装元素，它会吹走文本。

您应该从模板中的所有元素中删除 ID。唯一的 ID 应该是 HTML 文件中的那个。出于样式目的，请使用类而不是 id。然后创建一个 Vue 实例（只调用一次 new Vue，而不是两次），目标是 HTML 文件中元素的 ID。

可以直接使用 new Vue 创建多个 Vue 实例，但这很少有必要。为此，您需要在 HTML 文件中包含多个目标元素。

从数组数据初始化for循环中的组件

Initialize components in for loop from array data

vue.js