Solutions for accessing data variables outside of a Vue file

Utilizing Vue.js for data binding and filtering has been a rewarding experience. I've set up a Vue object within a .js file and now I aim to pass external data into it.

Let's take a look at my test object testFile.js:

var vm = new Vue({
    el:  "#results",
    data: {
        results: [],
    },
});

Here is what I try to do in my html:

<script>
    window.onload = function () {
        vm.results = [
        { name: 'Bron Smith', aliases: [], age: '', state: 'FL', locations: ['Miami','Orlando','Biscayne'], relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
    ];
};
 </script>

Although my Vue object receives the data, it doesn't display on the html page. Any suggestions on how I can successfully pass and showcase this data in the html?

Answer №1

<script>
  window.onload = function() {
    app.$set(app.data, [{
      name: "Bron Smith",
      aliases: [],
      age: "",
      state: "FL",
      locations: ["Miami", "Orlando", "Biscayne"],
      relatives: ["Dana Smith", "Diana Smith", "Test Smith"],
      report: "dsgsd"
    }]);
  };
</script>

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

EasyWaySaveArchive in ninja training - mastering the art of retrieving components

Recently started learning about dojo and JavaScript in general. I am currently working on a code snippet that requires a button to change based on the result of a php database query. The PHP script is already complete, and the code I am using so far looks ...

How can we use the useState hook in React to dynamically generate state variables?

I'm currently working on a React app where input fields need to be stored in the state. While I can use the useState hook to easily store these values, the challenge I'm facing is that I don't know what fields are needed since they are retri ...

Using HTML and JavaScript to choose relatives from the extended family: Uncles and Aunts

Looking for a better way to target elements in your HTML code? <div class="chunk" id=""> <div class="chunkContent"> <div class="textLeft" ></div> <div class="textRight" ></div> <div class= ...

Encountering an error message: [$parse:syntax] when trying to implement ng-class

I'm currently working on developing custom form validation, utilizing ng-class to emphasize required fields. Here is the syntax I am using: <div class="form-group" ng-class="{'has-error': dc.{fname}.nedatt({{fname}}.username)}"> ...

Utilizing AJAX to dynamically update a div on a separate webpage

In my application, I have a page called news.jsp that displays a list of news titles. Users can click on a title to read the full body of the news, which is loaded using AJAX within a span tag on the same page. Additionally, I display the top 5 news storie ...

Tips for transferring date values in an ajax request to a web application handler

I am currently working on plotting a graph between two dates using Google Charts. My goal is to send date values to the controller, which is implemented with webapp2. However, I am facing difficulties in figuring out how to send date values to the controll ...

The XMLHttpRequest's readystate gets stuck at 1 stage

Feeling a bit out of practice here - used to work with AJAX directly, but then spent a few years on a jQuery site and now my native JS skills are rusty. I've simplified my code as much as possible, but it's still not functioning: var rawfile = ...

Installing Karma and Jasmine for Testing Ruby on Rails 5.1 and Vue.js 2.4.x – A Step-by-Step Guide

My technology stack consists of Rails 5.1.x and Vue.js 2.4.x, with only Vue.js being utilized in the frontend. I have incorporated the following packages into my project: package.json ... "devDependencies": { "jasmine": "^2.8 ...

I am a beginner in vue.js and I am currently experimenting with posting and retrieving values in a cross-platform environment. However, I am encountering an error while

Trying to make a CORS-platform API call using post and get methods in Vue.js to register data. Note: The API call must be cross-platform. Encountering the following issue: The response to a preflight request does not pass access control check: No &apo ...

The keyboard automatically disappeared upon clicking the select2 input

Whenever I select the select2 input, the keyboard automatically closes $('select').on('select2:open', function(e) { $('.select2-search input').prop('focus',false); }); Feel free to watch this video for more i ...

Connect main data to sub-component

Example Vue Structure: <Root> <App> <component> Main function in main.js: function() { axios.get('/app-api/call').then(function (resp, error) { _this.response = resp.data; }) ...

Maximum number of days that can be selected with Bootstrap Datepicker

I currently have a datepicker set with the multidate option and I am looking to specify a maximum number of days that users can select, say 5 days. Once a user has selected 5 days, any additional days should become disabled dynamically. How can this be a ...

The <script> element failed to close correctly

Within my default.jspx file, which serves as the foundational layout for the page, I am attempting to import several jQuery libraries. The code snippet looks like this: <head> ... <spring:url value="/resources/js/lib/jquery-1.9.1.min.js" ...

Troubleshooting Issue with Search Functionality on MongoDB Integrated with Next JS

I'm currently working on developing a search system for my Next JS API. This API contains data such as fuel prices and fuel station names. Below is the snippet of code that I am using: class ApiFeatures { constructor(query, queryStr) { this.quer ...

Guide on creating a Discord bot using discord.js to send a random message from a predefined list at a specific time within a designated text channel on Discord

Here is an illustration of how a command functions https://i.sstatic.net/53fqU.png Also, here is my main.js file https://i.sstatic.net/jKLPR.png I need some assistance with this. Your help would be greatly appreciated. ...

What is the best way to iterate through an object and display each item as <li></li> within another <li>?

After retrieving a specific object from an express endpoint and seeing it on the console, I need to figure out how to map it in order to display a jsx that resembles this <li>keys</li> : <li>values</li> For example: Company: DML ...

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

I am currently working on implementing a multiline breadcrumb link feature for mobile and tablet devices. As users navigate through multiple folders, I need to handle scenarios where the number of links exceeds the maximum allowed in the breadcrumb contain ...

Transform various tables enclosed in separate div elements into sortable and filterable tables

I'm encountering an issue with making multiple tables sortable and searchable on one page. Despite all the tables having the same class and ID, only the first table is responsive to sorting and searching. I've followed a tutorial that recommends ...

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?

<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}"> <option value="previewWidth = 1920; previe ...

Tips for setting the textfield value in JSP using Javascript

I am in need of a way to create a random number that will be displayed in the textfield once the user clicks on the "Generate" button. Can someone guide me on how to assign the value of the "output variable" to the "randomNum" textfield? Sample HTML code: ...