Estoy usando vue2.5. Simplemente intento que una variable fuera de vue (javascript tradicional o jquery) acceda a una propiedad del modelo vue. La propiedad en este caso es sol. Quiero que los datos que se encontrarían en el sol se muestren en el planeta Const. ¿Cómo puedo hacer que funcione? Intenté usar const planet = $app.sun pero eso no funciona. No estoy seguro de cómo hacer que esto funcione. Por favor vea mi ejemplo
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>
Puede configurar Vue en variable y luego acceder a $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>