How to bind Vue data attribute values in a template with Vueify's render function

Question

How to bind Vue data attribute values in a template with Vueify's render function

Struggling with connecting Vue data attributes to placeholders in a Vueify template. Looking for help to understand how to resolve this issue.

Browserify is being used to execute the Vueify transformation on .vue files.

This is the current configuration:


        new Vue({
            el: '#clip-slides',
            render : function(createElement){
                var template = require('./clips.vue');
                return createElement(template);
            },
            data : {
                'testValue' : 'I am a test value!'
            }
        });


        <template>
            <div>
                {{testValue}}
            </div>
        </template>

The placeholder testValue within the template remains empty.

In need of guidance on properly passing "data" options to the template.

javascript vue.js vuejs2 browserify

Answer 1

Answer №1

Make sure to pass it as a property.

Clips.vue

<template>
    <div>
      {{exampleValue}}
    </div>
</template>

<<script>
export default {
  props: ['exampleValue']
}
</script>

main.js

new Vue({
  el: '#app',
  render(h){
    let template = require("./Clips.vue")
    return h(template, {props:{exampleValue: this.exampleValue}})
  },
  data:{
    exampleValue: "Greetings!"
  }
})

View the demo.

Answer 2

Make sure to pass it as a property.

Clips.vue

<template>
    <div>
      {{exampleValue}}
    </div>
</template>

<<script>
export default {
  props: ['exampleValue']
}
</script>

main.js

new Vue({
  el: '#app',
  render(h){
    let template = require("./Clips.vue")
    return h(template, {props:{exampleValue: this.exampleValue}})
  },
  data:{
    exampleValue: "Greetings!"
  }
})

View the demo.

How to bind Vue data attribute values in a template with Vueify's render function

Answer №1

Similar questions

Displaying an object inside an array based on specific conditions

What is the best way to transform an array of objects into MenuItems for a Material-UI Select component?

Determine when Vue router is aware of clicks on router-link-exact-active

Personalize the appearance of your stackLabels in Highcharts with dynamic customization options

Tips on concealing or deactivating the "sort by" input and label for the Vuetify 3 <v-data-table> when in mobile view

Tips for managing unexpected TCP disconnects?

Performing an Ajax MySQL query utilizing the text from a link as a reference, across a page

What could be causing the confusing "undefined" result when parameters are passed to a mapped getter function

Is it possible to dynamically update the text on a button based on the user's selection from a dropdown menu in angular.js?

Display error upon submitting the form

Instructions on adding an activity indicator in a centered box with a loader inside

Initiating JSON request upon selection of radio button

The print screen button in Internet Explorer is not functioning the same way as in other browsers when using JavaScript

Error message: "React Component not identified"

Ways to stop VoiceOver from selecting the background content when a modal is open

The React state that is declared inside the render method cannot be accessed within the

How can I configure a wildcard route in Express.js to exclude matching asset files?

What is the best way to remove items from a JSON object array using PHP?

Utilize React and Material UI's makeStyles with a necessary '!important' suffix

Update three options in a dropdown menu using JavaScript