Vuejs change view

Question

I'm trying to change views on page load and on click events.

Here is what I have so far:

Vue.component('stale', {
    template: '#stale-template'
});

Vue.component('buying', {
    template: '#buying-template'
});

var vm = new Vue({
    el: '.slot-container',
    data: {
        currentView: 'stale'
    },
    methods: {
        buyTemplate: function(e) {
            this.currentView = 'buying';
        }
    }
});

This is my HTML:

<div class="slot-container">
    <component is="{{currentView}}"
    v-transition="fade"
    transition-mode="out-in">
    </component>
</div><!-- END .SLOT-CONTAINER -->

<script id="stale-template" type="x-template">
    STALE
    <div class="slot stale">
        <div class="row">
            <div class="half">
                <div class="buy-icon" v-on="click : buyTemplate">
                    <img src="{{ Asset.to('img/exchange/buy-icon.png') }}" alt="buy" />
                    <div class="title">Buy</div>
                </div>
            </div>
            <div class="half">
                <div class="sell-icon">
                    <img src="{{ Asset.to('img/exchange/sell-icon.png') }}" alt="sell" />
                    <div class="title">Sell</div>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="buying-template" type="x-template">
    BUYING
    <div class="slot buying">
        <div class="search">
            <form action="{{ url_to('exchange/search') }}" method="post" id="buy-search" class="dark">
                <input type="text" value="{{ input_old('item') }}" name="item" class="item-input" placeholder="Search item..." data-autocomplete="{{ url_to('search/item/autocomplete') }}" />
                <button type="button" class="exchange-search-btn">Search</button>
            </form>
        </div>
        <div class="results">

        </div>
    </div>
</script>

You can view the working example here: http://jsfiddle.net/4vgjx61t/ For some odd reason, I can never get anything to initiate to begin with. I'm following the example found here: http://vuejs.org/guide/application.html

Thank you.

David K. Hess · Accepted Answer · 2015-06-30 01:51:19Z

0

You are using syntax valid in Vue 0.12 but are loading Vue 0.11 in the Fiddle. Add this as an external resource to fix it:

https://raw.githubusercontent.com/yyx990803/vue/dev/dist/vue.min.js

answered Jun 30, 2015 at 1:51

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs change view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related