43190

Vuejs Fetch Request returns data but attributes assignments don't work

Question:

I am playing around with Vuejs in our project. I have used the same technique in my other project and its working. But here I am not able to assign the data return by the fetch request to a json resource.

When I try to access data returned in then and put it in alert it does gives me the data objects. but I want to assign it to my data attribute packages array.

Here is my component code

<template> <div id="packages"> <div class='radio' v-for="package in packages"> <label> <input type='radio' name='packageradio' v-bind:value="package.id">{{ package.quantity }} <span id='price-tag'>{{ package.price }}</span> </label> </div> </div> </template> <script> export default { data(){ return { packages:[] } }, created(){ this.fetchPackages(); }, methods: { fetchPackages: function(){ fetch('/die-cut/size/4/packages') .then(res => res.json()) .then(function(res){ alert("i am hit"); this.packages = res; }) .catch(err => console.log(err)); } } } </script>

This is the api:

[ { "id": 1, "quantity": 50, "price": 400, "saving": 100, "size_id": 4, "sticker_id": 2, "created_at": "2018-02-21 17:48:46", "updated_at": "2018-02-21 17:48:46" }, { "id": 2, "quantity": 100, "price": 900, "saving": 100, "size_id": 4, "sticker_id": 2, "created_at": "2018-02-21 17:50:43", "updated_at": "2018-02-21 17:50:43" } ]

Answer1:

The data for packages should be working fine. The problem I see in your code is with the following html:

<label> <input type='radio' name='packageradio' v-bind:value="package.id"> {{ package.quantity }} <span id='price-tag'>{{ package.price }}</span> </label>

From the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label" rel="nofollow">documentation</a> for the label element:

<blockquote>

label can permit the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content" rel="nofollow">Phrasing content</a>, but no descendant label elements. No labelable elements other than the labeled control are allowed.

</blockquote>

So, in your code having input a flow content is the key issue.

<hr />

The issue with your code is:

.then(function(res){ alert("i am hit"); this.packages = res; // this isn't referenced to the vue instance from the function scope })

Replace it with this:

.then(res => { // access parent scope alert("i am hit"); this.packages = res; // now, this will access the vue instance })

Answer2:

I think its to do with your this keyword so, either use the ES5 syntax or do some thing like this

fetchPackages: function(){ var vm = this fetch('/die-cut/size/4/packages') .then(res => res.json()) .then(function(res){ alert("i am hit"); vm.packages = res; }) .catch(err => console.log(err)); }

Or off course you can go ahead and do something like this,

fetchPackages(){ fetch('/die-cut/size/4/packages') .then(res => res.json()) .then((res) => { alert("i am hit"); this.packages = res; }) .catch(err => console.log(err)); }

Recommend

  • Flash radiobutton: how do I get the selected radiobutton?
  • How do I display a dialog that asks the user multi-choice questıon using tkInter?
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • xcode don't localize specific strings
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • Read text file that is not in the main package in a runnable jar
  • Roxygen error “Skipping invalid path”
  • xtable package: Skipping some rows in the output
  • Swift: Switch statement fallthrough behavior
  • C++ Partial template specialization - design simplification
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Insert into database using onclick function
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Deselecting radio buttons while keeping the View Model in synch
  • Can I display google adwords (AdView) in javafx on android
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Align navbar back button on right side
  • How to add date and time under each post in guestbook in google app engine
  • How to set/get protobuf's extension field in Go?
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Validaiting emails with Net.Mail MailAddress
  • sending/ receiving email in Java
  • Which linear programming package should I use for high numbers of constraints and “warm starts” [clo
  • what is the difference between the asp.net mvc application and asp.net web application
  • Web-crawler for facebook in python
  • Akka Routing: Reply's send to router ends up as dead letters
  • Cannot Parse HTML Data Using Android / JSOUP
  • Matrix multiplication with MKL
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do you join a server to an Active Directory (domain)?
  • How do I configure my settings file to work with unit tests?
  • Java static initializers and reflection
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • unknown Exception android
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?