0

Lo que intento hacer es que cuando en el componente 2 se ejecute la funcion onUpdate se ejecute la funcion sort en el componente 1.

COMPONENTE 1

var container = new Vue({
        el: "#main",
        data: {
            list:[{name:"John"}, 
                    {name:"Joao"}, 
                    {name:"Jean"} ],
            },
        methods:{
    sort: function(){
    alert("Hola desde otro componente")
                }
        ,
            }
        });

COMPONENTE 2

  var list = document.getElementById("main");
Sortable.create(list, { 
  /* options */ 
 animation: 200, // ms, animation speed 
  ghostClass: "ghost",
  scroll: true,

    onUpdate: function (){
this.componenet1.sort();

  },

}); // That's all.

CODIGO COMPLETO EN CODE OPEN

1
  • Cual es la relacion entre ellos?
    – gbianchi
    el 5 ene. 2019 a las 19:10

2 respuestas 2

1

una forma es accediendo al componente directamente

var list = document.getElementById("main");
Sortable.create(list, { 
/* options */ 
animation: 200, // ms, animation speed 
ghostClass: "ghost",
scroll: true,

onUpdate: function (){
componenet1.sort();
},

});

suerte y saludos

1

Como pasar funciones como props en VueJS, desde un componente padre a un componente hijo.

  • App.vue

    <template>
        <div id="app">
        <child-component :onClick="sampleFunction" :fruits="sampleData"></child-component>
        </div>
    </template>
    
    <script>
    import ChildComponent from './components/ChildComponent.vue'
    
    export default {
        name: 'app',
        data(){
        return{
            sampleData: ["Apple", "Banana", "Mango", "Strawberry"]
        }
        },
        components: {
        'child-component' : ChildComponent
        },
        methods: {
        sampleFunction(fruitName){
            alert("You have selected: " + fruitName)
        }
        }
    }
    </script>
    
  • Componente hijo

    <template>
        <div>
            <ul>
            <li v-for="fruit in fruits">
                <button type="button" @click='onClick(fruit)'> {{ fruit }}</button>
            </li>
            </ul>
        </div>
    </template>
    
    <script>
    export default {
        props: {
        onClick: Function,
        fruits: Array
        }
    }
    </script>
    

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.