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

您已为每个按钮分配了left-menu-button的ID。然后，您已经告诉Vue将某些内容装入该ID。具有该ID的第一个元素（即第一个按钮）将被视为安装元素，它会吹走文本。

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

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

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

1 个答案: