如何在 vuejs 中渲染模板

Question

我正在使用 2.3.4 版的 jQuery 和 vuejs：

https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js

我有以下代码：

 // initialize the vue. vueVar = new Vue({ el: '#content', methods: { // Start by creating a function to inject a menu link to the dom. inject_menu_link: function (menu_title, menu_url, menu_type) { if($(menu_type + ' li').length){ // if the menu exists template = '<menuLinkTpl v-bind:url="'+menu_url+'" v-bind:name="'+menu_title+'"></menuLinkTpl>'; $(menu_type + ' > li').last().after(template); } }, }, components: { // make a menu template to add; given the url and the title of the menu 'menuLinkTpl': { props: [{ // menu link url url: '', // menu link name name: '', }], template: '<li><a v-bind:href="\'/\'+ url " v-bind:title="name">{{name}}</a></li>', }, }, });

 <body> <div id="content"> <ul id="block-menu"> <li><a>menu 1</a></li> <li><a>menu 2</a></li> </ul> </div> </body>

我想要实现的是能够在我调用函数vueVar.inject_menu_link('menu link title', 'url-test', '#block-menu')时向菜单添加一个新的菜单项

现在发生的事情是：

<menuLinkTpl v-bind:menuurl="/url-test" v-bind:menuname="menu link title"></menuLinkTpl>

这是附加到 dom而不被渲染的内容。

我怎样才能解决这个问题？

Answer 1

我建议为此使用v-for

export default {
    data () {
         return  {
             menuItems: [{ .. initial value ...} ]
         }
    },
    methods: {
        injectMenu () {
            menuItems.push({}).
        }
    }
}

在模板中：

<body>
  <div id="content">
    <ul id="block-menu">
      <li is="menuLinkTpl" v-for="menu in menuItems" :url="menu. ..." :name="menu. ..."></li>
    </ul>
  </div>
</body>

不应该使用带有 vue 的文本来动态添加内容。 这是因为 vue 需要创建一个虚拟 DOM 以获得更好的性能。 请参阅https://v2.vuejs.org/v2/guide/render-function.html如果您仔细阅读文档，您可以使用createElement并模仿您的文本注入。

如何在 vuejs 中渲染模板

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-12 10:53:13

如何在 vuejs 中渲染模板

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-12 10:53:13

解决方案1
1 已采纳 2018-01-12 10:53:13