Guide to displaying a template using Vue.js

Question

Guide to displaying a template using Vue.js

Incorporating jQuery and vuejs version 2.3.4:

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

The code snippet below demonstrates my current setup:

      // Instantiating Vue.
      vueVar = new Vue({
        el: '#content',
        methods: {
          // Function to inject a menu link into the DOM.
          inject_menu_link: function (menu_title, menu_url, menu_type) {
            if($(menu_type + ' li').length){
              // Inserting menu link if it already exists
              template = '<menuLinkTpl v-bind:url="'+menu_url+'" v-bind:name="'+menu_title+'"></menuLinkTpl>';
              $(menu_type + ' > li').last().after(template);
            }
          },
        },
        components: {
          // Menu template for adding URL and title of the menu
          'menuLinkTpl': {
            props: [{
              // URL of the menu link
              url: '',
              // Name of the menu link
              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>

My goal is to dynamically add a new menu item whenever vueVar.inject_menu_link('menu link title', 'url-test', '#block-menu') is called.

The issue I'm facing is that:

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

This HTML tag is being appended to the DOM unrendered.

How can this be resolved?

jquery html vue.js

Answer 1

Answer №1

If you want to dynamically add content, consider using a v-for loop in Vue.js

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

In your template, you can do something like this:

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

When adding dynamic content with Vue, it's important to remember that text injection may not be the best approach because Vue needs to create a virtual DOM for optimal performance. To learn more about rendering functions in Vue, check out https://v2.vuejs.org/v2/guide/render-function.html You can also use the createElement method to achieve this.

Answer 2

If you want to dynamically add content, consider using a v-for loop in Vue.js

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

In your template, you can do something like this:

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

When adding dynamic content with Vue, it's important to remember that text injection may not be the best approach because Vue needs to create a virtual DOM for optimal performance. To learn more about rendering functions in Vue, check out https://v2.vuejs.org/v2/guide/render-function.html You can also use the createElement method to achieve this.

Guide to displaying a template using Vue.js

Answer №1

Similar questions

Why does the for loop assign the last iteration of jQuery onclick to all elements?

Repair the voting system

"Create a div element with resizable capabilities, similar to a

The desired hover effect on the navigation bar is not functioning properly

Utilizing jQuery and AJAX to submit a form

Tips on getting Qtip2 Growl to start at the bottom position

Ajax-enabled pre-resize feature for efficient multiple file uploads

The issue with implementing simple getElementsByClassName JavaScript in the footer of a WordPress site persists

Tips on preventing the opening of a new browser tab by using Ctrl + click

Creating a Vue.js webpack build optimized for production platform

The absence of a closing parentheses in the argument is causing an issue when rendering

Creating text input without borders using HTML and CSS

What might be causing Flex not to function properly on my personalized landing page?

Struggling to make align-content function properly in a CSS flexbox layout grid

I am struggling to make php redirect work using onclick() function

Is there a way to display (PHP for loop variables) within an HTML table using echo?

Switching the sorting criteria from 'AND' to 'OR' in the JPList library

I am having trouble with my append function even though I checked the console log and did not see any errors (beginner's inquiry)

Troubleshooting Vue 3 Composition API: Issue with Data Access in V-For Loop

Warning in Vue 3 with ESLint: [intlify] HTML Detection Detected