javascript - Vue.js : Passing an external variable to a component through initialization? -


i trying pass variable (here, externalvar) component, directly when initializing. can't find how (probably not understanding documentation :/ ). correct way it?

the initialization :

var externalvar = "hello world"  const leftmenu = new vue({     el: "#left-menu",     template: "<clm/>",     components: {clm},     variabletopass: externalvar }); 

the component initializing here defined (getting variabletopass in data):

<template src="./template-l-m.html"></template>  <script> import draggable 'vuedraggable'; export default {     name: 'leftmenu',     components: {         draggable     },      data () {         return {             jsonobject: this.variabletopass,         }     }, [ ... ] </script> 

but , when trying use this.jsonobject, says it's undefined. doing wrong ?

if understand correctly want use props pass data child components

dynamically bind prop attribute on child component element using :variable="variabletopass"

var externalvar = "hello world"  const leftmenu = new vue({     el: "#left-menu",     template: "<clm :variable='variabletopass'/>",     components: {clm},     data: {         variabletopass: externalvar     }  }); 

define props option in child component

<template src="./template-l-m.html"></template>  <script> import draggable 'vuedraggable'; export default {     name: 'leftmenu',     components: {         draggable     },     props: ['variable'],     data () {         return {             jsonobject: this.variable,         }     }, [ ... ] </script>  

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -