Question

我的主vue应用程序中有2个视图（newuser-view和next-view）。默认为newuser-view，它在我的主html页面中实例化。

当用户在newuser-view中点击提交按钮时，我想将currentView更改为next-view。

主要vue应用程序是：

var Vue = require('vue');
Vue.use(require('vue-resource'));
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue({

    el: '#seoinput',

    data: {
        currentView: 'newuser-view',
        zipData2: {},
        newUser: {},
    },

    components: {
        'newuser-view': require('./views/inputdata'),
        'next-view': require('./views/displaydata')
    },

    methods: {
        refreshPage: function(zipData1) {
            this.zipData2 = zipData1;

            if (zipData1) {
                this.currentView = 'next-view';
            }

            // will change currentView value to next-view
            // will hit routes and refresh page
        }
    }
});

组件newuser-view代码是：

module.exports = {
    template: require('./inputdata.template.html'),
    props: ['app' ],
    data: function() {
        return {
            newUser: {
                biz_name: '',
                url: '',
                biz_age: '',
                country: '',
                pcode: ''
            },
            submitted: false,
            zipData1: {},
        };
    },
    computed: {
        errors: function () {
            for (var key in this.newUser) {
                if (!this.newUser[key]) {return true};
            }

            if (!this.zipData.City) {return true};

            return false;
        }
    },
    components: {
        codecheck: require('../components/codecheck')
    },
    methods: {
        populateZip: function(zipData) {
        this.zipData1 = zipData;
        this.newUser.pcode = this.zipData1.Zipcode;
        },
        onSubmitData: function(e) {
            // prevent the default action
            e.preventDefault();
            var zipinfo = this.zipData1;
            var newuser = this.newUser;
            this.$http.post('/api/seoData', newuser);
            this.app(zipData1);
            this.submitted = true;
        }
    }
};

newuser-view模板：

<h1>
    Please enter the information requested:
</h1>

<form  method="POST" v-on="submit: onSubmitData">
    <div class="form-group">
        <label for="biz_name">
            Name of business:
            <span class="error" v-if="! newUser.biz_name">*</span>  
        </label>
        <input type="text" name="biz_name" id="biz_name" class="form-control" v-model="newUser.biz_name">
    </div>

    <div class="form-group">
        <label for="url">
            Website URL:
            <span class="error" v-if="! newUser.url">*</span>
        </label>
        <input type="text" name="url" id="url" class="form-control" v-model="newUser.url">
    </div>

    <div class="form-group">
        <label for="biz_age">
            How old is the business?
            <span class="error" v-if="! newUser.biz_age">*</span>
        </label>
        <input type="text" name="biz_age" id="biz_age" class="form-control" v-model="newUser.biz_age">
    </div>

    <div class="form-group">
        <label for="zipData.Zipcode">
            Postal code:
            <span class="error" v-if="! newUser.pcode">*</span>
        </label>
        <codecheck when-applied="{{ populateZip }}"></codecheck>
    </div>

    <div class="form-group">
        <label for="country">
            Country:
            <span class="error" v-if="! newUser.country">*</span>
        </label>
        <input type="text" name="country" id="country" class="form-control" v-model="newUser.country">
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-default" >Done!</button>
    </div>

</form>

<br/>
<div class="alert alert-success" v-if="submitted">Validating your postal code</div>
<hr/>

Answer 1

您可以使用特殊的动态组件在视图之间轻松切换。

<component v-bind:is="currentView">
  <!-- component changes when vm.currentView changes! -->
</component>

https://vuejs.org/v2/guide/components.html#Dynamic-Components

我将此用于我的应用，并设置一个单独的bus实例，用于切换应用中不同组件/位置的视图。例如：

var bus = new Vue();

new Vue({
  template: '#app',
  data: {
    currentView: 'home'
  },
  created: {
     var self = this;
     bus.$on('view',function(page) {
       self.currentView = page;
     });
  },
  methods: {
     changeView: function(page) {
        bus.$emit('view', page);
     }
  }
})

有关bus和非亲子事件的更多文档：https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

Answer 2

Just use the component syntax.

<component is="{{currentView}}"></component>

Example: https://jsfiddle.net/q7xcbuxd/19/

更改Vue中的观看次数

2 个答案: