Vue

On this page

  1. Tracking component data

The third-party Vue package for Ray uses the package for NodeJS for most core functionality. See the NodeJS reference for a full list of available methods.

Once the plugin is installed, you may access the helper function as this.$ray() from within your Vue components.

A component's data object can be displayed in Ray with the data() method.

<template>
    <div class="w-full">{{ msg }}</div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'hello world'
        }
    },
    mounted() {
        this.$ray().data();
    }
}
</script>

A component's props (names and values) can be pretty-printed in Ray with the props() method.

<template>
    <div class="w-full">{{ msg }}</div>
</template>

<script>
export default {
    props: ['msg'],
    mounted() {
        this.$ray().props();
    }
}
</script>

A named ref's innerHTML contents can be sent to ray with the ref() method.

<template>
    <div ref="msg" class="w-full text-blue-500 p-5">
        <strong>hello world</strong>
    </div>
</template>

<script>
export default {
    mounted() {
        this.$ray().ref('msg');
    }
}
</script>

Changes to any of a component's data variables can be tracked and displayed in real time using the track(name) method.

<script>
export default {
    props: ['title'],
    data() {
        return {
            one: 100,
            two: 22,
        };
    },
    created() {
        this.$ray().data();
        this.$ray().track('one');
    },
    mounted() {
        setInterval( () => { this.one += 3; }, 4000);
    }
}
</script>

<template>
    <div class="flex-col border-r border-gray-200 bg-white overflow-y-auto w-100">
        <div class="about">
            <h1>{{ title }}</h1>
            <a @click="sendToRay()">send ref to Ray</a><br>
            <a @click="incrementOne()">increment data var 'one'</a><br>
        </div>
        <div ref="div1" class="w-full flex flex-wrap">
            <div ref="div1a" class="w-4/12 inline-flex">one</div>
            <div ref="div1b" class="w-4/12 inline-flex">two</div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['title'],
    data() {
        one: 1,
    },
    created() {
        this.$ray().html('<em>test component created!</em>');
    },
    mounted() {
        this.$ray('test component mounted!');
        this.$ray().props();
        this.$ray().track('one');

        //if using vuex and the vue-ray vuex plugin, display vuex state changes:
        this.$store.commit('incrementOne');
    },
    methods: {
        sendToRay() {
            this.$ray().ref('div1');
        },
        incrementOne() {
            this.one += 1;
        },
    }
};
</script>