Implementing Vue data binding with JavaScript objects

Question

Implementing Vue data binding with JavaScript objects

I have been tinkering with a JavaScript object that I want to connect with a Vue view.

When I trigger a function to update this JavaScript object using AJAX, I expected Vue to automatically sync up and refresh the view. However, it seems like the binding isn't happening as anticipated.

Some research advises making the AJAX call within the Vue declaration itself, but due to certain limitations, I am reluctant to take that route.

To showcase the problem more visually, I've put together a fiddle demonstrating the issue without the AJAX component. You can also find the relevant code posted below.

https://jsfiddle.net/g6u2tph7/5/

Thank you in advance for your assistance and insights.

Best regards,

vmitchell85

JavaScript

window.changeTheData = function (){
    externalJSSystems =  [{description: 'Baz'}, {description: 'Car'}];
    document.getElementById("log").innerHTML = 'function has ran...';
    // This doesn't update the Vue data

}

var externalJSSystems = [{description: 'Foo'}, {description: 'Bar'}];

Vue.component('systable', {
    template: '#sysTable-template',
    data() {
        return {
            systems: externalJSSystems
        };
    }
});
new Vue({
   el: 'body'
});

HTML

<systable :systems="systems"></systable>

<button type="button" onclick="changeTheData()">Change</button>
<br><br>
<div id="log"></div>
<template id="sysTable-template">
    <table>
        <thead>
            <tr>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="sys in systems">
                <td>{{ sys.description }}</td>
            </tr>
        </tbody>
    </table>
</template>

javascript ajax vue.js

Answer 1

Answer №1

Give this a try:

externalJSSystems.push({name: 'Foo'}, {name: 'Bar'});

This code snippet adds new objects to the externalJSSystems array and updates the view. Why might your previous attempt not be successful? It could be due to assigning a new reference of an Array to externalJSSystems, while Vue is still tracking the old one.

To accomplish what you intend, avoid creating a new instance of Array but instead clear it. Here's an example:

window.updateData = function (){
    externalJSSystems.length = 0
    externalJSSystems.push({name: 'Foo'}, {name: 'Bar'});
}

Answer 2

Give this a try:

externalJSSystems.push({name: 'Foo'}, {name: 'Bar'});

This code snippet adds new objects to the externalJSSystems array and updates the view. Why might your previous attempt not be successful? It could be due to assigning a new reference of an Array to externalJSSystems, while Vue is still tracking the old one.

To accomplish what you intend, avoid creating a new instance of Array but instead clear it. Here's an example:

window.updateData = function (){
    externalJSSystems.length = 0
    externalJSSystems.push({name: 'Foo'}, {name: 'Bar'});
}

Answer 3

Answer №2

When the systable Component is created, Vue attaches an "Observer" class to the original externalJSSystems Array. This extends the prototype of the Array, adds getter/setters for each property, and maintains a two-way binding between the Component's data and the initial Array. However, the changeTheData() method overrides this Vue-modified Array with a new Array that lacks the Observer, thus breaking the two-way binding.

The reason why externalJSSystems.push( … ) still works is because the standard Array methods ('push', 'pop', 'shift', 'unshift', 'splice', 'sort', and 'reverse') have been modified to be handled by the Observer.

To achieve the desired behavior, focus on the Vue Component "props" — as seen in the component markup:

<systable :systems="systems"></systable>

. Currently, :systems="systems" does not do anything. By defining systems in the Parent Vue scope and setting it as a prop within the Component registration, dynamic data can be passed to Components within the Parent's scope.

Component

Vue.component('systable', {
  template: '#sysTable-template',
  props: {
    systems: Array
  }
});

Vue Instance

var vm = new Vue({
  el: 'body',
  data: {
    systems: externalJSSystems
  }
});

Check out the implementation in action through this fiddle: https://jsfiddle.net/itopizarro/ycr12dgw/

I stored the Vue instance — var vm = new Vue({ … }) — so that the changeTheData method could access its systems data. This allows the external changeTheData() method to reference the Vue instance where systems was defined, enabling modifications to the Array without replacing or iteratively altering items.

Answer 4

When the systable Component is created, Vue attaches an "Observer" class to the original externalJSSystems Array. This extends the prototype of the Array, adds getter/setters for each property, and maintains a two-way binding between the Component's data and the initial Array. However, the changeTheData() method overrides this Vue-modified Array with a new Array that lacks the Observer, thus breaking the two-way binding.

The reason why externalJSSystems.push( … ) still works is because the standard Array methods ('push', 'pop', 'shift', 'unshift', 'splice', 'sort', and 'reverse') have been modified to be handled by the Observer.

To achieve the desired behavior, focus on the Vue Component "props" — as seen in the component markup:

<systable :systems="systems"></systable>

. Currently, :systems="systems" does not do anything. By defining systems in the Parent Vue scope and setting it as a prop within the Component registration, dynamic data can be passed to Components within the Parent's scope.

Component

Vue.component('systable', {
  template: '#sysTable-template',
  props: {
    systems: Array
  }
});

Vue Instance

var vm = new Vue({
  el: 'body',
  data: {
    systems: externalJSSystems
  }
});

Check out the implementation in action through this fiddle: https://jsfiddle.net/itopizarro/ycr12dgw/

I stored the Vue instance — var vm = new Vue({ … }) — so that the changeTheData method could access its systems data. This allows the external changeTheData() method to reference the Vue instance where systems was defined, enabling modifications to the Array without replacing or iteratively altering items.

Answer 5

Answer №3

Instead of defining systems as a simple data property, consider making it a computed property for better efficiency. As mentioned in another response, the original object is being referenced. By transforming systems into a computed property, Vue will automatically monitor any variables used in its calculation (such as externalJSSystems) and update the computed property accordingly.

Vue.component('systable', {
template: '#sysTable-template',
computed: {
    systems() {
        return externalJSSystems;
    }
}
});

Answer 6

Instead of defining systems as a simple data property, consider making it a computed property for better efficiency. As mentioned in another response, the original object is being referenced. By transforming systems into a computed property, Vue will automatically monitor any variables used in its calculation (such as externalJSSystems) and update the computed property accordingly.

Vue.component('systable', {
template: '#sysTable-template',
computed: {
    systems() {
        return externalJSSystems;
    }
}
});

Implementing Vue data binding with JavaScript objects

Answer №1

Answer №2

Answer №3

Similar questions

Switch out a character with its corresponding position in the alphabet

The new mui v5 Dialog is having trouble accepting custom styled widths

[ElectronJS][VueJs] ERROR_OSSL_EVP_UNSUPPORTED

Manipulating Arrays in JavaScript: Techniques for Extracting Values Buried in Nested Objects

modify an element using jquery

Errors in Chartist.js Data Types

What is the method for exporting data directly from an EC2 instance to a file, such as a .txt or .json file?

Utilizing ng-model to control the visibility of a label or anchor tag

Discover the method of connecting to a unique JavaScript trigger while utilizing IJavaScriptExecutor

What is the best way to display a nested JSON object structure?

end the node.js automated testing process

Tips for validation of Vuetify text field with asynchronous function?

What is the best method for distributing this array object?

Is there a way to incorporate an external JavaScript file into a .ts file without the need for conversion?

Learn the process of connecting checkboxes to a database in MeanStack using Angular

Utilizing props to transfer data between components in ReactJS

The various sections of my website are neatly tucked away under one tab, only revealing themselves to users as they click on each individual tab

Generate live references to interact with elements

JavaScript: The function is encountering issues with properly formatting the numbers

Unable to reset iframe style height in IE8 using JavaScript