Attempting to modify an object's property while maintaining reactivity, unfortunately encountering an issue with the property or method "vm" not being defined on the instance despite being referenced during the render

Question

Attempting to modify an object's property while maintaining reactivity, unfortunately encountering an issue with the property or method "vm" not being defined on the instance despite being referenced during the render

Up to this point, I've been attempting to set the value of an object property to false using @click='review.isActive = true'. However, it appears that Vue cannot detect these changes, causing the property to not be reactive.

According to the documentation found at https://v2.vuejs.org/v2/guide/list.html#Caveats, there are alternative methods to avoid this issue:

Vue.set(vm.reviews, index, true)

vm.reviews.splice(index, 1, true)

Unfortunately, I encountered errors when trying both approaches. It seems like I lack a full understanding of how the Vue instance operates and may be attempting to access it incorrectly.

I presume that Vue/vm refer to the Vue instance, but for some reason, I can't seem to interact with it.

In both instances, I receive the error message "Property or method 'vm'/'Vue' is not defined on the instance but referenced during render."

Using the Vue webpack-simple webpack template, my Vue instance is initialized in the main.js file as shown below:

var vm = new Vue({
    el: '#app',
    router: router,
    store: store,
    render: h => h(App)
});

The array manipulation takes place in a different file within a component.

javascript vue.js vuejs2

Answer 1

Answer №1

In the scenario where your review object exists within your reviews array and does not have an isActive property initially, you can utilize vm.$set to introduce a new reactive property.

Consider this example:

new Vue({
  el: '#app',
  data: {
    reviews: [{
      id: 1,
      name: 'Review #1'
    },{
      id: 2,
      name: 'Review #2'
    },{
      id: 3,
      name: 'Review #3'
    }]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <div v-for="review in reviews" :key="review.id">
    <p>
      Review {{ review.name }} status: 
      <code>{{ review.isActive ? 'ACTIVE' : 'INACTIVE' }}</code>
    </p>
    <button @click="$set(review, 'isActive', true)">Activate</button>
  </div>
</div>

Observe how $set is employed in the @click event handler.

As mentioned in the comment below, if you wish to append new properties post data retrieval, ensure it is done prior to assigning the value to your data property, for instance

this.reviews = data.from.somewhere.map(review => ({...review, isActive: false}))

If there arises a necessity to add a new property after data assignment, you must employ vm.$set to render it reactive

this.reviews.forEach(review => {
  this.$set(review, 'isActive', false)
})

Once these properties are dynamically appended, you can proceed with altering them without employing $set

<button @click="review.isActive = true">

Answer 2

In the scenario where your review object exists within your reviews array and does not have an isActive property initially, you can utilize vm.$set to introduce a new reactive property.

Consider this example:

new Vue({
  el: '#app',
  data: {
    reviews: [{
      id: 1,
      name: 'Review #1'
    },{
      id: 2,
      name: 'Review #2'
    },{
      id: 3,
      name: 'Review #3'
    }]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <div v-for="review in reviews" :key="review.id">
    <p>
      Review {{ review.name }} status: 
      <code>{{ review.isActive ? 'ACTIVE' : 'INACTIVE' }}</code>
    </p>
    <button @click="$set(review, 'isActive', true)">Activate</button>
  </div>
</div>

Observe how $set is employed in the @click event handler.

As mentioned in the comment below, if you wish to append new properties post data retrieval, ensure it is done prior to assigning the value to your data property, for instance

this.reviews = data.from.somewhere.map(review => ({...review, isActive: false}))

If there arises a necessity to add a new property after data assignment, you must employ vm.$set to render it reactive

this.reviews.forEach(review => {
  this.$set(review, 'isActive', false)
})

Once these properties are dynamically appended, you can proceed with altering them without employing $set

<button @click="review.isActive = true">

Attempting to modify an object's property while maintaining reactivity, unfortunately encountering an issue with the property or method "vm" not being defined on the instance despite being referenced during the render

Answer №1

Similar questions

React - Unable to perform 'removeChild' on 'Node' object: The specified node cannot be removed as it is not a child of this node

Is there a way to update a variable in a controller using AJAX?

What is the best way to send and utilize a variable from app.js in index.ejs?

Troubleshooting: Issue with AngularJS ng-click functionality within Modal

What is the best way to create a layout with two images positioned in the center?

Why are users not visible in the Node.js application?

Numeric value along with two characters following the decimal place

Sending Java Servlet JSON Array to HTML

Transferring an array from PHP to JavaScript via an Ajax response

Commencing CSS Animation Post Full Page Loading

A step-by-step guide on implementing the bliss view engine in Express.js instead of Jade

As I iterated over the Vehicles API data, I encountered an issue while trying to access specific Vehicle information. I received an error message stating "Cannot read property 'id' of undefined

Chinese Version of Element UI Pagination instead of English

Guide on integrating Select2 with webpack

Add the $scope ng-click event to a previously hidden element once it becomes visible

When submitting a form with a contenteditable div and text box using JQuery, the POST request is not

Discover the best method for retrieving or accessing data from an array using Angular

What is the most effective way to implement a single modal throughout my web application without having to duplicate HTML code on each page?

How about setting variables in Vue router as an alternative to controlling component visibility?

AngularJS factory problem