在Vue中更改视图

Changing views in Vue

本文关键字：视图 Vue      更新时间：2023-09-26

我有2个视图(newuser-view和next-view)在我的主vue应用程序。默认是newuser-view在我的主html页面实例化。

我想改变currentView下一个视图时，用户点击提交按钮在newuser-view。

主应用程序是:

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/>

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

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

https://v2.vuejs.org/v2/guide/components.html动态组件

我在我的应用程序中使用这个，并设置了一个单独的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://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

直接使用组件语法。

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

的例子:https://jsfiddle.net/q7xcbuxd/19/

相关文章：