0

creé un componente vue y necesito que cuando el usuario en el html declara el componente, pueda escribirle un JSON como atributo (que es el contenido que usa otra libreria). El tema es que un json como atributo no es muy amigable y pensé en que se pueda enviarle un nodo hijo con la data como innerHTML y que cuando el componente realiza el mounted sacar la data de ese hijo, sin embargo no encuentro la forma de acceder al elemento desde el cual se construyó el componente. ¿Alguna sugerencia o alternativa?

Algo así sería la idea (probe con ref pero no la puedo acceder)

    <element dir="where/st02">
        <div ref="content">
            {"data" : "hola"}
        </div>
    </element>



Vue.component('element', {
template: '<div id="elem-div"></div>',
props: ['dir'],
mounted: function() {
    // this.content.innerHTML?
},
beforeMount: function() {
}
});

var app = new Vue({
el: '#app'

});

2 respuestas 2

1

Te dejo un ejemplo de como lo puedes hacer. Solo debes acceder a tu propiedad con this.myPropName, para asignarle un valor :myPropName="value". Saludos!

Vue.component('element-component', {
  template: '<div><h3>"element-componen"</h3> Json recibido: {{json}}</div>',
  props: ['json'],
  mounted: function() {
      console.log("json recibido: ",this.json)
  },
});


var app = new Vue({
  el: '#app',
});
#app{min-height:300px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" >
  <element-component :json='{"name":"John", "age":31, "city":"New York"}'>
    
     
    </element-component>
</div>

0

lo que capaz no entendes es como trabaja Vue.js es diferente a jquery y javascript

para obtener data de un tag html con vue.js se hace asi ejemplo:

en html:

<div id="impuestos">
<input type="text" id="salNom" v-model="nominal">
</div>

en el .js

var impApp = new Vue({
  el: "#impuestos",
  data: {
    nominal: 0}});

ahora puedes acceder a el valor que ponen en el input cuando quieras mediante

impApp.nominal

o como les quieras llamar a tus variables, ahi podes acceder al valor y escribirlo en el JSON.

dime si tienes dudas sobre esto que te respondo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.