Display personalized template within the Vue.js render method

Is it possible for the Vue render function to receive a partial template from an external source?

If there is a render function like the one below:

var custom_form_modal = function ( context, custom_form ) {

  context.$Modal.info({
    render: (h) => {
      return h('div', {})
    }
  })
... 

where custem_form looks something like this:

<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="Name" prop="name">
        <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
    </FormItem>
    <FormItem label="E-mail" prop="mail">
        <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
    </FormItem>
    <FormItem label="City" prop="city">
        <Select v-model="formValidate.city" placeholder="Select your city">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
        </Select>
    </FormItem>
</Form>

or any other JavaScript-based form explanation.

I want to use this as the custom_form, and then render it into the div (as seen in the custom_form_modal). Is there a way to achieve this?


EDIT-1

I want to render the template using the function custom_form_modal, so that I can display the modal on a button click event without having to write code within the invoking vue file's <template>. This is my requirement.

Answer №1

After reviewing the documentation, I was able to find a solution to implement it:

var custom_modal_function = function (context,  custom_component ) {

  context.$Modal.info({
    render: (h) => {
      return h('div', {

      },[
        h(custom_component, { props: {} })
      ])
    }
  })
}

Implement the custom_modal_function like this:

import custom_component from '../components/combined_table/components/custom_form.vue'

  export default {

    methods: {
      handleStart() {
        Util.custom_modal_function(this, custom_component)
      }
    },
    components: {
      custom_component
    }
  };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Once the ajax request is finished, load only the <script> tags that have specific ids

I'm currently implementing infinite-scroll to dynamically load more content which includes <script> tags that need to be executed. To achieve this, I have created the following code as an ajax-callback: JS on load ajax callback: function a ...

The JSON output from the gapi (Google Analytics) array in PHP is not displaying any values

I've been utilizing the gapi class within a CodeIgniter website. The implementation I'm using is based on this resource, which returns an array that functions perfectly. To pass this array to my JavaScript, I've been attempting the following ...

Learn how to fetch data using JavaScript and store it in an array, then display the data in a Bootstrap card using inner

I am working with a Fetch method that looks like this: async function sendApiRequest() { let APP_ID = "f61bb958"; let APP_Key = "7c465e19d8e2cb3bc8f79e7a6e18961e" let INPUT_VALUE = document.getElementById("inputRecipe&q ...

Storing audio files in Firebase Cloud Database and displaying them in React js + Dealing with an infinite loop problem

Lately, I've been encountering a persistent issue that has proven to be quite challenging. Any assistance would be greatly appreciated. Thank you in advance. The objective is to create a form that allows for the easy addition of new documents to the ...

I would prefer not to add another database table just to differentiate between team members and friends. Can you provide assistance with this?

Instead of creating another table named friends in Strapi and linking it to Visual Studio Code, I have opted to use a Characters table for both team members and friends. This way, I can input new data only at Characters and filter it to differentiate betwe ...

"Encountering a 404 error when submitting a contact form in Angular JS

Looking to set up a contact form for sending emails with messages. Currently diving into Angular Express Node Check out the controller code below: 'use strict'; /** * @ngdoc function * @name exampleApp.controller:ContactUsCtrl * @descripti ...

Creating a Vue.js application with multiple pages in nested subdirectories through custom configurations in vue.config.js

I successfully created a multipage Vue.js application with functional pages on domain/legal, domain/submit, and more by utilizing Vue.js' pages feature (customizing vue.config.js). Now, I'm attempting to add nested pages under a new subdirectory ...

Activate the action using the onclick interaction

window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false); My current setup involves an event listener that responds to a mousewheelEvent by executing a function. However, when attempting to directly trigger this function on a separa ...

What is the significance of "new" being omitted in the upcoming jQuery script?

After diving into the JQuery documentation, I discovered that it is possible to create the event object like this: //Instantiate a new jQuery.Event object without using the "new" keyword. var e = jQuery.Event( "click" ); I find it puzzling why we don&apo ...

Retrieve combination values through an AJAX request using ExtJS

My UI is developed using ExtJS, and I have a specific set of tasks that need to be executed when the page loads: Initiate an ajax call to the server to fetch a HashMap. Create a combobox within the main Panel on the page. var combo = Ext.create(' ...

Issue with a input element having relative positioning within a flexbox

Objective: Aim to align the middle DIV (MIDDLE) within a flexbox row in the center. Issue: The right element includes an input element with relative positioning. Consequently, the middle DIV element (MIDDLE) is no longer centered but instead shifted to th ...

Encountering "net::ERR_EMPTY_RESPONSE" error when making a HTTP PUT request using the HUE API in JavaScript

GET requests are functioning properly. PUT requests made from the API Debug tool are also working correctly. However, both PUT and POST requests, regardless of the data or API URL used, are resulting in the following error: example: OPTIONS net::ERR_ ...

How can I display a badge in my app when it is running using React Native?

For the past week, I've been dealing with an issue. My question is how can I display a new message badge without having to click on the message room when running my app. The badge should only show up after clicking on the message room. I see the badg ...

When hovering over an object in three.js, the cursor should change on mouseover

In my scene, I have added a sphere and plane geometry. Clicking on the plane geometry will open a linked website. Now, when hovering over the plane geometry, I want the mouse cursor to change to a hand pointer icon, and revert back to its original style ...

Encountering the "Error: data.map is not a function" issue within Next.js

I'm having trouble understanding why this first fetch call works perfectly: async function getData() { const res = await fetch('https://jsonplaceholder.typicode.com/todos') return res.json() } export default async function Home() { co ...

Discover the intricacies of Sails Js and Vue.js communication

Currently, I am delving into both Sails and Vue.js by developing a comprehensive REST application. Up to this point, I have successfully created a multi-step sign-up page using Vue that POSTs all necessary information to different Controllers in Sails, co ...

AngularJS is patiently awaiting the completion of the translation rendering process

I implemented the ngCloak directive to my body element on the page and every angular-related element, but it appears that it is not working with AngularJS translate. The translate variables show up on the page initially and then get translated after a se ...

Bring in a video file in order to watch it on your web page (HTML)

Is there a way to upload and play a video file using the video element? I am looking to add a video file to my webpage that can be played using a video element. <input type="file"> <h3>Video to be imported:</h3> <video width="320" ...

What is the most effective method for accurately tallying the number of matches in a Datalist using the Input value as a reference

I have set up a datalist element with an associated input element for autocompletion in modern browsers: HTML code <input type="search" id="search" list="autocomplete" /> <datalist id="autocomplete"> <option value="c++" /> < ...

How can I stop a hyperlink from activating Jquery?

A script was created to highlight any <TR> element when a user clicks on it, and it is functioning correctly. <script> $(document).ready(function () { $(document).on('click', 'tbody tr', function (e) { ...