Vue.js encountered an error: Unexpected TypeError in promise. The function $set is not recognized

Currently, I am working on fetching comments from the Reddit API and attempting to update an array using $set in order to refresh the view. However, I encountered an error:

Uncaught (in promise) TypeError: $set is not a function

Virtual Machine Component:

export default {
  name: 'top-header',
  components: {
      Comment
  },
  data () {
    return {
      username: '',
      comments: []
    }
  },
  methods: {
      fetchData: function(username){
          var vm = this;
          this.$http.get(`https://www.reddit.com/user/${username}/comments.json?jsonp=`)
          .then(function(response){
              response.body.data.children.forEach(function(item, idx){
                  vm.comments.$set(idx, item); 
              });
          });
      }
  }
}
javascriptvue.js

Answer №1

To showcase the two options, I have created a codepen example: http://codepen.io/tuelsch/pen/YNOqYR?editors=1010

The $set method is specifically accessible on the component itself:

.then(function(response){
     // Replace existing comments array directly with new data
     vm.$set(vm, 'comments', response.body.data.children);
 });

Alternatively, since Vue.js should detect the push call on an array:

.then(function(response){
     // Clear any previous comments
     vm.comments = [];

     // Add new comments
     response.body.data.children.forEach(function(item){
         vm.comments.push(item); 
     });
 });

Refer to https://v2.vuejs.org/v2/api/#vm-set for the API details.

If preferred, you can utilize the global Vue.set method using the same arguments:

import Vue from 'vue';
// ...
Vue.set(vm, 'comments', response.body.data.children);

Check out https://v2.vuejs.org/v2/api/#Vue-set for the overall API guide.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Identify and react to an unexpected termination of an ajax upload process

My ajax uploading code can determine if a file was successfully uploaded only after the upload has completed. If the upload is terminated before completion, no data is returned. Is there a way to detect when an upload is unexpectedly terminated and alert t ...

phpjavascriptjqueryajaxfile-upload

No pathways can be established within Core UI Angular

I've been attempting to use the router link attribute to redirect to a new page, but instead of landing on the expected page, I keep getting redirected to the dashboard. Below is an overview of how my project's structure looks: [![enter image de ...

javascriptangulartypescriptroutescore-ui

Res.render() is failing to display content

I'm facing an issue with my express route where it's not rendering a jade template properly. If I provide the wrong jade template string, I get the usual error indicating that the file couldn't be found to render in the browser. However, wh ...

javascriptnode.jsexpress

Object Literal vs Object-Oriented Javascript: Comparing the Two

When it comes to using Object-Oriented Programming (OOP) in JavaScript, I often find myself not utilizing it much. For instance, instead of defining a constructor function and setting up prototypes like this: function Person(name){ return this.name = name ...

javascriptoop

Pass additional parameter while calling a function in Vue

Visit Element on GitHub Check out the upload component <el-upload class="avatar-uploader" action="/upload" :show-file-list="false" :on-error="handleUrlError" :on-success="handleUrlSuccess"> <i v-else class="el-icon-plus avatar-uploade ...

javascriptvue.jsvuejs2vue-componentelement-ui

The data type 'string[]' cannot be assigned to the data type '[{ original: string; }]'

I have encountered an issue while working on the extendedIngredients in my Recipe Interface. Initially, I tried changing it to string[] to align with the API call data structure and resolve the error. However, upon making this change: extendedIngredients: ...

javascriptreactjstypescriptinterface

The perplexing actions of Map<string, string[]> = new Map() have left many scratching their heads

I encountered an issue while trying to add a value to a map in my Angular project. The map is initially set up using the following code: filters: Map<string, string[]> = new Map(); However, when I attempt to add a value to this map, it starts displa ...

javascriptarraysangulartypescript

Updating token using an Ajax request in a PHP webpage

Currently, I am encountering an issue with my token system for requesting PHP pages via Ajax. The problem arises when attempting to make multiple Ajax requests from the same page as I am unable to refresh the token on the initial page. To elaborate furthe ...

javascriptphpjqueryajaxtoken

Utilizing a TinyMCE editor within a text area and implementing a posting form through ajax

I am currently using tinyMCE in my textareas and submitting my form through AJAX. However, I am facing an issue where the value in the textarea is not being recorded when I try to save it. This is my text area: <textarea class="form-control" name="cont ...

javascriptjqueryajaxlaraveltextarea

JavaScript Equivalent of jQuery's removeClass and addClass Functions

I am faced with the challenge of rewriting the following code without using jQuery: document.querySelector('.loading-overlay').classList.remove('hidden'); Can anyone provide guidance on how this can be achieved? ...

javascriptjqueryhtmlcss

Watching the $scope variable using $watch will result in triggering even when ng-if directive is used, displaying

Encountering an unusual behavior in AngularJS that may appear to be a bug, but there could be a logical explanation. A certain value is being passed to a directive as an attribute. Within this directive, the parameter is being watched using $scope.$watch. ...

javascriptangularjsangularjs-directive

JavaScript- Tabbed Navigation with Lists as the Content

Currently, I am facing a frustrating issue in finding a suitable solution. My website uses tabs that utilize the UL, LI system, similar to most tab systems found in tutorials. The problem arises because the javascript on my site interferes with using the ...

javascriptjqueryhtmlcsstabs

The response from the Ajax request in jQuery did not contain any content to download

I have a PHP script that generates PDF output successfully when accessed directly. Now, I want to fetch this PDF file using AJAX. In pure JavaScript, the following code snippet works well: var req = new XMLHttpRequest(); req.open("POST", "./api/pd ...

javascriptphpjqueryajaxxmlhttprequest

Tips for creating a zoomable drawing

I have been working on this javascript and html code but need some assistance in making the rectangle zoomable using mousewheel. Could someone provide guidance? var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width ...

javascripthtmlcanvas

"Implementing a click event handler on a button within an iframe

On my website, I have embedded an iframe containing external content. Within the code of this iframe is a button identified by the id "XYZ." I want to create an onclick function for this button. Here's what I've attempted: $( "#XYZ" ).click(fun ...

javascriptjqueryiframeonclick

Animating a div using a changing scope variable in AngularJS

As a newcomer to Angular, I am looking to add animation to a div element using ng-click within an ng-repeat loop. Here is what I have attempted: app.js var app = angular.module( 'app', [] ); app.controller('appController', function($ ...

javascripthtmlcssangularjs

Unexpectedly, Ajax call is triggering additional callbacks

I am currently facing an issue with my AJAX request in the code below. The Chrome Inspector is showing that the callback function associated with the request is being called twice, resulting in the response being logged into the console twice. Additional ...

javascriptajax

Assign the value from the list to a variable in order to execute an API call

Imagine a scenario where there's a button that displays a random joke based on a specific category. The categories are fetched using an API request from https://api.chucknorris.io/jokes/categories The jokes are generated from https://api.chucknorris. ...

javascripthtmlapi

What are the steps to rename a file in Parcel without using automated tools?

Whenever I attempt to execute npm start or npm build, an error occurs stating that unknown: Entry /mnt/c/Users/kabre/Desktop/18-forkify/index.html does not exist. I was informed that Parcel could be renaming my index.html automatically. It's a bit con ...

javascriptnpmparceljs

Issue with AngularJS script halting when reaching factory function that returns a promise

I have been working on a beginner project that is essentially a simple task manager (similar to those todo list projects). I created a user login page for this project and here is how it functions. There are two functions, siteLogin() for logging in, and ...

javascriptangularjsangular-promise