javascript - Changing views in Vue -

-

i have 2 views (newuser-view , next-view) in main vue app. default newuser-view instantiated in main html page.

i want change currentview next-view when user hits submit button in newuser-view.

main vue app is:

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';             }              // change currentview value next-view             // hit routes , refresh page         }     } });

component newuser-view code is:

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 () {             (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 default action             e.preventdefault();             var zipinfo = this.zipdata1;             var newuser = this.newuser;             this.$http.post('/api/seodata', newuser);             this.app(zipdata1);             this.submitted = true;         }     } };

template newuser-view:

<h1>     please enter 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 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 postal code</div> <hr/>

just use component syntax.

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

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


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more