transfer the information from a particular key in JavaScript to Vue

Just starting out with Vue and working on a web app. I have some data in the JavaScript that includes keys like title, author, etc. I'm looking to pass the value associated with the title key to Vue. How can I achieve this?

I attempted using book.title, but encountered an error in Vue.


            <tbody>
        <tr v-for="(row, index) in filteredRows" :key="`iSBN-${index}`">
            <td v-html="highlightMatches(row.title)">{{ row.title }}</td>
            <td>{{ row.author }}</td>

        </tr>
        </tbody>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

                <script>
        var book = {{ query_results_book_json|safe}};
        console.log(book);
        const app = new Vue({
            el: '#app',
            data: {
                filter:'',
                rows: [
                    { title: book.title, author: '' }
                ]
            }
})
</script>

Answer №1

The key requirement for the data property is that it must be a function.

const book = {title: 'Some Title', author: 'Some Author'};

const app = new Vue({
  el: '#app',
  data: () => ({
    filter: '',
    rows: [book]
  }),
  mounted() {
    console.log(this.rows);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

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

Maintaining active navigation state in JQuery/JavaScript after clicking a link: tips and tricks

While many resources discuss adding the active class to a nav link using jquery, there is less information on maintaining the active state after the nav link has been clicked. After experimenting with code from various sources, I have attempted to set ses ...

How can I repeatedly show text using knockout js?

How can I use KnockoutJS to display the text and year within a div loop when selecting a brand and model? Example: Mercedes>C *C-180 *2016 *C-200 *2015 Here is the HTML code: <select data-bind="options: manufacturers, optionsCaption:'Bra ...

Retrieving intricate JSON data from a specific web address

I need assistance in extracting and printing the date value from the JSON content available at the specified URL. Specifically, I am looking to retrieve the date value of "data.content.containers.container.locationDateTime" only if the "data.content.conta ...

Using AngularJS to add external scripts to partials with ng-include

Why won't my main javascript files (located in index.html) work in the partials (such as page1.html)? For example, jQuery and syntax highlighting scripts are not functioning properly when I click on my menu items. HTML CODE: <div data-ng-controll ...

How can one retrieve the ID value within a function using jQuery?

I am trying to implement an upload picture function along with cropper js function. However, I am facing an issue with displaying the file name even though I have declared the variable and set the input value. But when I attempt to pass and display the nam ...

Using jQuery AJAX to send data containing symbols

When making an AJAX call, I am including multiple values in the data like this: var postData = "aid="+aid+"&lid="+lid+"&token="+token+"&count="+count+"&license="+license; postData = postData + "&category="+category+"&event_name="+e ...

Issue with integrating Django and VueJS. Unable to load VueJS component onto Django platform

While working on an integrated Django and VueJS project with webpack_loader, I encountered an issue. Django runs on localhost 8000 and VueJS on port 8080. However, when I tried accessing port 8000, I received the error message in the console indicating "GE ...

Having trouble with my Express app due to errors popping up because of the order of my routes

app.get('/campgrounds/:id/edit', async (req,res) =>{ const campground = await Campground.findById(req.params.id) res.render('campgrounds/edit', { campground }); }) app.get('/campgrounds/:id', async (req,res) =>{ ...

Upon clicking the IconButton within the ImageListItemBar, reveal the image within a Material-UI Dialog

import * as React from 'react'; import Box from '@mui/material/Box'; import ImageList from '@mui/material/ImageList'; import ImageListItem from '@mui/material/ImageListItem'; import ImageListItemBar from '@mui/m ...

Update the state both before and after executing the API call

I'm facing an issue with the setState function where it seems to be getting called again before completing the previous batch of state updates. My data object has the following structure: [{ id: 0, loading: false }] On my webpage, I have toggle butt ...

When using vue-resource for an http request, the error message "_.isArray is not a function" may be

Attempting to retrieve an object from a server located at localhost:3000. The object is visible when accessing the address via a web browser. In my Vue instance's methods property, I have a function that is executed on the front end: goToTutors: fun ...

What is the best way to retrieve the latest prop from a parent component in Vue.js after invoking a method?

Within my code, there is an event emitter that triggers an API call in the parent component: Parent component <ProductChild :productId="productId" @update="getProduct()" :product="product" ...

Header formatting issue when attempting to implement tablesorter plugin

I implemented the widget-scroller and widget column Selector in my table using the table sorter plugin in jQuery. Has anyone encountered a problem like the one shown in this picture? It seems that my table headers do not align with the columns properly an ...

Having trouble figuring out the reason my JavaScript code isn't functioning properly. Any ideas?

Just starting out with javascript and running into an issue, This snippet of code seems to be working as expected: function test(args){ return "12345 - "+args; } console.log(test("678910")); However, this other piece of code is ...

Does the sequence matter when studying JavaScript, Ajax, jQuery, and JSON?

Expanding my job opportunities is a top priority for me, which is why I am dedicated to learning JavaScript, AJAX, jQuery, and JSON. As I delve into these languages, I can see how they all have roots in JavaScript. My main inquiry is about the relationsh ...

Angular Inner Class

As a newcomer to Angular, I have a question about creating nested classes in Angular similar to the .NET class structure. public class BaseResponse<T> { public T Data { get; set; } public int StatusCo ...

"Vue js: Embracing Labeling and Agile Transformation in Dynamic

Is it possible to dynamically change the input field's type and label between text, email, and number in Vue.js? I am new to this framework and would like to learn how to do this. <input type="email"> ...

Initiate an AJAX request within an existing AJAX request

On one of my pages, page A, I have a form that passes parameters to a script using AJAX. The results are loaded into div B on the same page. This setup is functioning properly. Now, I want to add another form in div B that will pass parameters to a differe ...

The PHP function is not successfully receiving a value from the AJAX call to be entered into the Database

I've been struggling with a piece of code lately, trying to pass the value 1 to my database when a user clicks the "collect coins" button. The goal is to reset the column "dailyfree" every day at 12 pm so that users can click the button again on the n ...

The authentication for npm failed with a 401 error code when attempting to log in

When attempting to sign in to npm using the command npm login and providing my username, password, and email, I am encountering the following error message: The Registry is returning a 401 status code for the PUT request. Even though I have used the sa ...