JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="app"></div>

<template id="app-tpl">
    <div>
        <h1>test</h1>
        <button v-on:click="showContent">show content</button>
        <h3 v-show="contentShown">vue version: {{version}}</h3>
        <button v-on:click="showContent">show another content</button>
    </div>
</template>

<hr size=1>

<div id="testrunner"></div>

<template id="testrunner-tpl">
    <div>
        <button v-on:click="testHighlight">test highlight</button>
        <button v-on:click="test">test</button>
    </div>
</template>

JavaScript

// func testing components

// app.showContent.test.js
var mixin = {

    events: {

        'test:highlight': function() {
            var btn = $(this.$el).find('button').get(0);
            $(btn).attr('style', 'border-color: orange;')
        },

        'test': function() {
            $(this.$el).find('button').get(0).click();
        }

    }
};


// app.js
var app = new Vue({

    mixins: [
        mixin
    ],

    el: '#app',

    template: '#app-tpl',

    events: {

    },

    data() {
        return {
            version: Vue.version,
            contentShown: false
        }
    },

    ready() {

    },

    methods: {
        showContent: function() {
            this.contentShown = true;
        }
    }
});


// test runner

var tr = new Vue({
    el: '#testrunner',
    template: '#testrunner-tpl',
    methods: {
        testHighlight: function() {
            app.$dispatch('test:highlight');
        },
        test: function() {
            app.$dispatch('test');
        }
    }
});


//