Why is it necessary to decode JSON stringified objects in Vue props?

When passing a stringifyed object via props to a component, it seems like there is an issue with the data transformation.

<my-component :filter="stringobject" ></my-component>
stringobject = "{"search_text":"(ciClass like '%5684%') AND status NOT IN ('Terminated','Closed','Implemented')"}"

Upon receiving the filter prop inside the "my-component," the query appears to be altered to ciClass like 'v84%'

It seems that Vue is converting the '%56' to 'v'. The type of the prop in my-component is set to String.

Various attempts have been made to resolve this, such as escaping with backslashes, storing the string in a variable first, and using encoded characters instead of quotes. However, none of these solutions have worked. Can anyone shed light on what might be causing this issue?

Answer №1

After replacing the % symbol with %25 in my object that was stringified, it finally started functioning correctly! The reason behind why this decoding needed to happen is still a bit unclear to me.

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

Having trouble with JavaScript not working when clicking an image and toggling a div?

Why isn't the onclick image and toggle div functionality working with JavaScript? I made the change from: <input type="button" id="Showdiv1" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" /> to: <img src="https://d ...

How to sort Django models based on the value in a JSON field

When querying models, I receive a list of evaluated objects from the queryset. One of the fields in these models is a text field containing a JSON string. My goal is to sort this list based on a specific key within the JSON data. Here's an example of ...

Don't allow users to switch views without saving their changes

We are working with a Backbone.js application that presents various forms to users. Our goal is simple: if a user navigates away from the page without saving the completed form, we need to show a confirmation dialog. When dealing with traditional forms, i ...

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

What is the process for employing a template in Vue3 as opposed to utilizing the native template?

I'm currently working on creating a custom SelectBox component <Options> <Option v-for="person in people" :value="person" > {{ person.name }} </Option> </Options> My goal is to have the Op ...

What is the most effective method to convert PHP data into JSON and present it in the jQuery success scenario?

In the realm of jQuery, I have this particular piece of code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" > $(function() { $("input[type ...

HTML checkbox utilizing JavaScript

<input type="checkbox" name="smoker"> Is there a way for JavaScript to determine whether the checkbox is checked or unchecked without making changes to the HTML code above? ...

The function XmlHttpRequest getResponseHeaders() is not providing a complete list of all headers

Has anyone encountered the issue where jQuery's xhr method, getAllResponseHeaders, only displays the "Content-Type" header when trying to retrieve response headers from an ajax request? Below are the response headers: Access-Control-Allow-Credentia ...

best way to display an array in HTML

When I input a manufacturer, I want to display the complete data from each object inside the array in the HTML. However, when I call the function on the HTML page, all I get back is the word object repeated as many times as the Manufacturer is defined in ...

What could be the reason for my button not updating its text using a method?

I attempted to change the inner text of the Edit button to Save after it's clicked using a method, but it doesn't seem to be working. I could really use some help with this. b-button.editbtn.d-flex.flex-row.mb-3(@click="editBlood") ...

Gulp is failing to convert SCSS files into CSS

I'm having trouble getting gulp to compile my SASS code into CSS automatically. What could be the issue? file structure: public -css --styles.css -index.html sass -styles.scss gulpfile.js package.json Gulpfile: var gulp = require('gulp') ...

How can you pass two distinct variables in a JavaScript function?

This is the JavaScript code for my first page: <script> function MessageDetailsById(id) { $("#active"+id).css({"color":"red"}); var http = new XMLHttpRequest(); var url = "Ajax.php"; ...

Unable to initiate npm start due to author problem

I ran into an issue when trying to start npm in the command prompt: package.json: { "name": "reactapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-d ...

Is there a way to resolve the error message "Encountered an array instead of the expected Dictionary<String, Any> during decoding" in this code snippet?

import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() //API Key: 5ca10b2d20a545099a108a3aeceb329c //url: https://newsapi.org/v2/top-headlines?country=us&apiKey=5ca10b2d20a545099a108a3aece ...

Developing several sliders and ensuring they operate independently of each other

I am currently in the process of developing multiple sliders for a website that I am building. As I reach the halfway point, I have encountered a problem that has stumped me. With several sliders involved, I have successfully obtained the length or count ...

Issue with conditional comment in IE 8 not functioning as expected

Struggling with changing the SRC attribute of my iFrame specifically for users on IE 8 or older. This is the code I have written: <script> var i_am_old_ie = false; <!--[if lte IE 8]> i_am_old_ie = true; <![endif]--> </script> ...

Error: The callback function is no longer supported in Model.find() in Mongoose

I am having trouble retrieving all users from the database because I keep getting an error that says Model.find() no longer accepts a callback. Can someone please help me understand how to fetch data from my mongodb database? router.get('/users', ...

Does combineLatest detach this from an angular service function?

Check out this test service on Stackblitz! It utilizes the combineLatest method inside the constructor to invoke a service method: constructor() { console.log("TEST SERVICE CONSTRUCTED") this.setParameters.bind(this) this.assignFixedParamete ...

The initial invocation of the JavaScript function did not run

In my Grails view, I have a script tag set up like this: <script type="text/javascript"> /* the first setInterval */ setInterval( function() { console.log("Test..."); }, 5000 ); setInterval( ...

Combining column values with AngularJS

What is the best way to merge column values in AngularJS? ...