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://vuejs.org/v2/guide/render-function.html如果您仔细阅读了该文档，则可以使用createElement并模仿您的文字注入。

如何在vuejs中渲染模板

1 个答案: