javascript - vue 2.3 AJAX data binding not updating -


after successful ajax call data rendered on page not updating. remaining empty / null.

it seems missing how connect data returned front end variable , dynamically / live rendered html elements.

here relevant code snippets context. clear missing / incorrect?

javascript

page = new vue({    el: "#container",    data: {     option_id: null,     option_name: null   },    created:function() {      $.ajax({       type: 'post',       contenttype: 'application/json',       datatype: 'json',       url: 'ajax_methods/get_option',       success: function (ajax_data) {          self = this;          self.option_id = ajax_data.option_id;                 self.option_name = ajax_data.option_name;        },       error: function (e) {         console.log(e)       }     })    } })

html

<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script> <div id="container">    <p>{{ option_name }}</p>      <button v-on:click="send_option()"       type="button"       id="left_button"       name="left_button"       v-bind:value="option_id">  </div>

checking ajax success

when entering following in console, non null values come expected:

  • self.option_id
  • self.option_name

first, if exact code, self don't think initialized. use var self = this or let self = this

but mainly, need define self outside of ajax call. in javascript this keyword refers calling object. directly inside of created() function, it's vue instance. however, this not refer vue instance once inside ajax callback.

understand javascript’s “this” clarity, , master it

created:function() {     var self =        $.ajax({       type: 'post',       contenttype: 'application/json',       datatype: 'json',       url: 'ajax_methods/get_option',       success: function (ajax_data) {          self.option_id = ajax_data.option_id;                 self.option_name = ajax_data.option_name;        },       error: function (e) {         console.log(e)       }     })    }

Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj...
Read more

reflection - How to access the object-members of an object declaration in kotlin -

say have following, nested object declaration: object father { val fathersfield = "value" object child { val childsfield = 3.141592654 } } when use reflection starting father , i'm able find field fathersfield no member referencing child instance. is possible find inner object declarations via reflection? , if so, how? use nestedclasses kotlin-reflect : father::class.nestedclasses.find { it.simplename == "child" } or, @s1m0nw1 suggested, use java reflection , convert class kclass .kotlin if needed: father::class.java.classes.first { it.simplename == "child" }.kotlin
Read more

php - Doctrine Query Builder Error on Join: [Syntax Error] line 0, col 87: Error: Expected Literal, got 'JOIN' -

i building shipping system ecommerce site using doctrine. have appropriate shipping methods , prices based on product , region data in checkout. i using following code querybuilder: $shippingpricereccords = $this->em->createquerybuilder() ->select('price') ->from('ordershippingprice', 'price') ->innerjoin('ordershippingmethod', 'method', 'price.fkordershippingmethod = method.id') ->innerjoin('ordershippingmethodregionmapping', 'map', 'map.fkordershippingmethod = method.id') ->where('price.fkproducttype = :fkproducttype') ->andwhere('price.fkbrand = :fkbrand') ->andwhere('map.fkregion = :fkregion') ->setparameters([ 'fkproducttype' => $fkproducttype, 'fkbrand' => $fkbrand, ...
Read more