A method for dynamically incorporating Vue directives onto an element using code, such as v-if

Question

A method for dynamically incorporating Vue directives onto an element using code, such as v-if

Is it possible to programmatically add custom attributes to an element using plain JS, similar to

element.attr('data-attr', someValue)

? But what about Vue directives like v-if?

Imagine we have the following element

<p v-html="data.title"></p>

How can a v-if directive be added programmatically? This question arises with automation in mind, especially when dealing with numerous dynamic variables that may or may not exist.

The desired result is

<p v-if="data.title" v-html="data.title"></p>

The one step I am aware of is to access the element in the created() lifecycle hook using a ref.

javascript vue.js

Answer 1

Answer №1

According to the statement - there will be hundreds of dynamic variables that may or may not exist. Yet, in one of your comments, it was mentioned no looping. So, how exactly are you displaying the dynamic elements?

From what I understand, you aim to bind data properties dynamically into an HTML template. You might want to experiment with this solution to check if it aligns with your needs.

new Vue({
  el: '#app',
  data: {
    data: {
        heading: '<H1>Heading 1</H1>',
      title: '<h3>Title 1</H3>'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-for="(item, index) in Object.keys(data)" :key="index"  v-html="data[item]"></p>
</div>

The code snippet above should cater to the dynamic properties that are present.

Answer 2

According to the statement - there will be hundreds of dynamic variables that may or may not exist. Yet, in one of your comments, it was mentioned no looping. So, how exactly are you displaying the dynamic elements?

From what I understand, you aim to bind data properties dynamically into an HTML template. You might want to experiment with this solution to check if it aligns with your needs.

new Vue({
  el: '#app',
  data: {
    data: {
        heading: '<H1>Heading 1</H1>',
      title: '<h3>Title 1</H3>'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p v-for="(item, index) in Object.keys(data)" :key="index"  v-html="data[item]"></p>
</div>

The code snippet above should cater to the dynamic properties that are present.

A method for dynamically incorporating Vue directives onto an element using code, such as v-if

Answer №1

Similar questions

Obtaining information from the HttpServletResponse through an AJAX form

Extracting data from the response object and injecting it into the request

Checkbox Trouble: Troubleshooting AJAX Integration

Create a div element that can be expanded on smaller devices

Are there any event triggers for History.pushstate?

Having trouble deactivating date selections in Vue.js Material Datepicker

Can you identify the mistake in the jQuery function code below?

Having difficulty loading the JSON configuration file with nconf

The scrollbar remains visible on mobile devices

What is the best approach for extracting an object into the context of a function?

Utilize JavaScript to filter an array and extract a subset based on two specified range parameters

Div with sidebar that sticks

Directing traffic from one webpage to another without revealing the file path in the Routes.js configuration

ways to forcefully activate the change function

The Fundamentals of AngularJS Providers and Models

I leverage watchEffect to keep track of computed changes. Even though the computed value remains constant, watchEffect still triggers its operation

Steps for including a token in a Nuxt Axios instance

Display HTML in JavaScript without altering the Document Object Model

Encountered an issue while attempting to verify email through ajax with the database

How can I identify when a form has been edited in order to update the database with those changes only?