[Vuejs]-Vue.js: Implementing client-side restful router with vue-router and a store

by

0👍

I’ve implemented the following. It saves me from having to run computed data elements for each of my displayed values. I wish there was something simpler, like maybe a v-with="myFoo" that I could implement in UberFoo so I didn’t need to use a sub-component.

UberFoo.vue

<template>
    <minor-foo :data="myFoo"><minor-foo>
</template>

<script>
    import Store from '../store/store.js'
    import MinorFoo from './MinorFoo.vue'

    export default {
        'name': 'UberFoo',

        data () {
            return {
                'sharedState': Store.foosArray
            }
        },

        'components': {
            'minor-foo': MinorFoo
        },

        'computed': {
            myFoo: function() {
                for ( var i = 0; i < this.sharedState.length; i++ ) {
                    if ( this.sharedState[i]["fooId"] == this.$route.params.fooId ) return this.sharedState[i];
                }

                return {
                    "fooId": null,
                    "foo1": null,
                    "foo2": null
                }
            }
        }
    }
</script>

MinorFoo.vue

<template>
    <h1>FooId: {{ data.fooId }}</h1><br>
    <h2>Foo1: {{ data.foo1 }}<h2><br>
    <h2>Foo2: {{ data.foo2 }}</h2>
</template>

<script>
    export default {
        'name': 'MinorFoo',

        'props': ['data']
    }
</script>

Leave a comment