Using Vue.js data with an erb link_to tag

Currently, I am developing a Rails application where one page utilizes Vue.js to load a Google map, make some API calls with Axios, and gather user values using Vue.js. My goal is to pass these values as parameters within a "link_to" erb tag. Please refer to the code snippet below for reference:

Here is the hardcoded data in my Vue instance.

 let vm = new Vue({
  el: '#vue-map',
  data: {
    selectedProductId: 46,
    latt: '-26.29217',
    long: '28.070820000000026'
   }

Below is an excerpt from the actual index.html.erb file.

<div class='panel-footer'>
    <%= link_to 'Continue',maps_path(:product => {{selectedProductId}}) ,class: "btn btn-success"%>
</div>

Upon implementing this code, I encountered the error message "syntax error, unexpected '}'."

I attempted both with and without quotes. Without quotes, I received the syntax error mentioned earlier, and with quotes, it passed but the parameter in my Rails controller was treated as a string instead of the value stored in the Vue data.

If you have any insights or solutions, I would greatly appreciate your assistance :)

Answer №1

I successfully overcame my issue by implementing "v-bind". Instead of utilizing rails "link_to", I opted for a regular anchor tag.

Here is an excerpt from index.html.erb

  <div class='panel-footer'>
    <a v-bind:href="'/maps/customer_detail?product=' + selectedProductId" class='btn btn-success'>Continue</a>
  </div>

For those integrating Vue.js within rails html.erb files, I hope this solution proves to be beneficial.

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

When working with a destination module, what is the best method for storing the value that is returned from an

I have a simple function that exports data passed into a function expression. In a separate node module, I am utilizing this imported function by passing in parameters. The function is being called within a router.post method as shown below: Below is the ...

How to obtain the height of the parent screen using an iframe

Imagine a scenario where a div contains an image that is set to perfectly fit the height of the screen. This setup works flawlessly, with one exception - when placed within an iframe, the height of the div adjusts to match the content's height rather ...

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

Customize the <td> column based on values and rows. Modify the current jQuery code

This code snippet contains an HTML table that dynamically populates based on the dropdown selection. The script included in the code highlights the best and worst values in the table by changing their background color to green and red, respectively. & ...

Tips for automatically running a NuxtJS project

The management of NuxtJS projects is handled through GitHub. Here is the step-by-step development process: 1. Push updates from your local PC to the remote GitHub repository. 2. Access your hosting server and pull the changes from the remote repository to ...

Showing the ng-controller contents post executing AJAX request using the "as" method

My goal is to display the contents of ng-repeat after making an AJAX call using $http. <table ng-controller="TableController as tc"> <tr> <th>Date</th> <!-- other headers are here --> ...

Learn the process of adding transformation to an SVG path element

I have an SVG image loaded in my HTML file and I am trying to rotate one of its path elements, but I'm having trouble figuring out how to do it. The code snippet provided below is not working as expected. Can anyone provide guidance on how to achieve ...

Activate the zoom feature in jquery mobile

I am looking to implement the standard zooming effect in jquery mobile for my iOS iPhone app using jqm 1.3.2. After attempting the following: <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-s ...

Azure Chatbot that logs conversations in Webchat whenever the user selects 'none of the above' option

Recently, I've delved into the world of web chat services and embarked on a journey to craft a chat bot using pure JavaScript code that can seamlessly integrate into any HTML file. Despite consulting Microsoft's documentation, I find myself in a ...

Challenges encountered while creating a Number Tables Program (such as displaying 12 x 1 = 12) using Javascript

Currently, I am working on developing a program that can generate mathematical tables for any given number. For example: 3 x 1 = 3 3 x 2 = 6 3 x 3 = 9 3 x 4 = 12 To achieve this, the user should provide the following inputs: (1) The number they want ...

Displaying the identical date on two separate Ajax Calendar Extender controls in Asp.net

I am facing an issue with some ajax calendar extenders. I have two similar calendars and two textboxes, each linked to one calendar. <asp:TextBox ID="txt1" runat="server"</asp:TextBox> <cc1:CalendarE ...

Having trouble retrieving req.session variables in Express/NodeJS?

I have come across various versions of this particular question, however, none of them seem to address my issue directly. My current objective is to establish a Node.js server using Express. Below is my existing server configuration: var express = require ...

A step-by-step guide on how to capture user input in Vue.js after the "

Is there a way to capture the character entered after a key is pressed or after the user presses the enter key? I tried using the npm package npm i vue-keypress, but I couldn't figure out how to capture the characters. Can you suggest another method ...

What is the best way to achieve this particular grid layout using html and css?

I have a CSS grid of icons and I am trying to create a divider between each cell that fades in opacity towards the edges, similar to an airbrush effect. However, I want the cells themselves to remain transparent so that the background pattern is still visi ...

Guidance on modifying a sub row within a main row in Sails.js

I am currently working on a sails.js application This is the model structure for my application: name: String, address:String, appSettings: { header: String, color : String, font: String, } In my development process, I have utilized independ ...

Having trouble utilizing the DatePicker component in my react native application

I've encountered an issue while using DatePicker in react native. Whenever I try to use it, an error pops up saying: "render error a date or time must be specified as value prop". Here is the link to my repository: my github repository const [date, se ...

The placement of Bootstrap Datepicker is experiencing issues

I have integrated the Bootstrap Datepicker from Eternicode into my ASP.Net MVC website. While the functionality is working well, I am facing difficulty in positioning the datepicker modal using the orientation option mentioned in the documentation and code ...

Issue with Click event not functioning properly following an ajax request in a dynamic element within the Backbone framework

I have successfully implemented a dynamic popup in my Backbone.view through the click of a button: var Section = Backbone.View.extend({ className: 'sqs-frontend-overlay-editor-widget-section', events:{ 'click .sqs--section--control__ed ...

using post request axios to send parameters

I am looking to make a post request using axios with an object as the payload. employee:{ name: 'test', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d79687e794d6a606c6461236e6260">[email ...

Iterating through two classes in a Javascript loop

Hello, I'm facing a small obstacle that I'm hoping to overcome using JavaScript/jquery. Essentially, I have multiple div classes and I want to create a loop that adds a class to specific divs without manually assigning an id to each one. The goal ...