I am using vue2.5. I am simply trying to have a variable outside of vue (traditional javascript or jquery) access a property from the vue model. The property in this case is sun. I want the data that would be found in sun to display within Const planet. How can i make that work? I tried using const planet = $app.sun but that doesn't work. Not sure how to make this work. Please see my example
const planet=""
//document.getElementById("cat").append("myName");
new Vue({
el: "#app",
data: {
earth:"this is a ball",
sun:"s",
},
methods: {
toggle: function(){
this.sun="a ball of stars"
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{sun}}
<br>
<button v-on:click="toggle()">magic
</button>
<div id="planet">
</div>
</div>You can set Vue in variable and then access $data:
var vm = new Vue({
el: "#app",
data: {
earth:"this is a ball",
sun:"s"
},
methods: {
toggle: function(){
this.sun="a ball of stars"
}
}
})
const planet = vm.$data.sun
document.getElementById("cat").append(planet);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{sun}}
<br>
<button v-on:click="toggle()">magic</button>
<div id="planet">
</div>
</div>
<p>outside of Vue</p>
<div id="cat"></div>