Having trouble with Vue js v-bind not functioning with functions?

I'm currently working on creating a dynamic URL for a hyper-link to allow users to easily navigate to specific customer pages based on their ID.

<template>
    <list baseurl="/ajax/admin/customers" ordering="id" paginationOffset="20" inline-template>
        <div class="row">
            <loader :loading="loading"></loader>
            <div class="col-sm-12" v-if="!loading">
                <div class="row">
                    <div class="col-sm-6">
                        <h4>Showing {{ pagination.total }} results</h4>
                    </div>
                    <div class="col-sm-6 ">
                        <!--This button calls the openCanvas method which then triggers the open-canvas event-->
                        <button @click.prevent="openCanvas()"
                                class="btn btn-default pull-right" id="newCustomer">New Customer
                        </button>
                    </div>
                </div>
                <table class="table admin-table">

                    //Table Headers with sorting options

                </table>
                <div class="row">
                    <div class="pagination-container">
                        <pagination :pagination="pagination" :offset="20"></pagination>
                    </div>
                </div>
            </div>
        </div>
    </list>
</template>

The function responsible for generating the URL is defined in the module's methods.

/**
 * Private methods for this vue class
 *
**/
methods: {
    clearSearch() {
        this.filters.search = '';
        EventBus.fire('apply-filters', this.serializedFilter);
    },
    generateCustomerUrl(id) {
        return "/admin/customers/" + id;
    }
},

However, when Vue.js 2.0 runs, it generates an error message:

vm.generateCustomerUrl is not a function Stack trace:

I am looking for a way to dynamically generate URLs in Vue.js 2.0 without relying on interpolation since it is disabled.

Answer №1

The problem arose from nested components in Vue.js, attempting to access the parent component's functions while inside the <list></list> scope.

The fix involved passing the function as a property to the list component.

For example:

<list generateUrl=this.generateUrl></list>

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

UI not reflecting changes in vuex state

Currently, I am in the process of transitioning a vue2 project to vue3 and have noticed an issue with my UI not updating when objects in my vuex store are updated. Below is how I am setting up my store: store/index.js import {mutations} from './mutat ...

A regular expression in Javascript that can be used to identify at least one word starting with a number among multiple words, with a

Currently, I am utilizing JavaScript Regex to validate an input field based on specific conditions: The value must consist of only alphabets and numbers There should be a minimum of two words (more than two are allowed) Only one word can start with a num ...

What is the best way to individually open dropdowns in React?

I am facing an issue with dropdowns in a list where clicking one dropdown opens all others due to their state being the same. I believe using ids could be a solution, but I am not sure how to implement it correctly. The project utilizes reactstrap, so I ...

Is server-side rendering necessary for `browserHistory` in React Router?

I am a beginner in the world of React and currently diving into the complexities of routing. While hashHistory (/#/paths/like/this) proves to be functional, browserHistory (/paths/like/this) appears much cleaner. However, I noticed that when reopening URLs ...

The PrimeVue/TreeSelect component does not bind the value accurately

Utilizing the TreeSelect feature of Primevue, I am currently running primevue version "^3.25.0" with vue version "^3.2.45" Upon using this component, my expectation is to have the selected object's value or the entire object boun ...

Exploring the concept of module patterns in JavaScript

Currently, I am working on honing my JavaScript skills as I am relatively new to the language. I am attempting to identify the specific element that triggered an event and display it within a span element. However, I seem to encounter an issue as clicking ...

When implementing .forEach, an object within the array is mistakenly duplicated

Struggling to populate an array of objects with unique data using the .forEach function to display feedback in the Administrator page of my portfolio. However, encountering an issue where the objects from 'd' are getting duplicated in the 'f ...

Why is Ajax sending back a null response?

I'm attempting to retrieve some information, but when using AJAX, it's only returning an empty array. Here is the AJAX code: $.ajax({ url:"user_profile_upload.php", type: "POST", data: { data : 'sss&apos ...

P5js Image Selection Drop-down

Struggling to create a dropdown menu in p5js that showcases images. Facing issues with loading images, unlike in other sketches where the problem did not occur. Seeking a fresh perspective to resolve this error. Appreciate any assistance! let picker; let ...

Show only the image source (img src) and do not display the audio and video sources using jQuery

In my code, I need the following conditions to be met: when an image is posted from the backend, the video and audio sources should automatically hide; when a video is posted, the image and audio sources should hide; and when an audio file is posted, the v ...

Utilize the Set data structure to eliminate duplicates from an array while retaining the item with

Looking for help with this array: array = [{id: 1, name: 'apple'}, {id: 2, name: 'banana'}, {id: 3, name: 'apple'}] I want to eliminate objects with duplicated "name" property while retaining the highest id for each unique ...

Tips on updating a JSON file exclusively using vanilla JavaScript with an AJAX call using the HTTP POST method?

Question One: I have been struggling to find a way to update a JSON file using the HTTP POST method when both files are stored on the same server (e.g. Godaddy or AWS). While I am able to send data to the server successfully, the JSON file is not being upd ...

JQUERY confirm dialog causing AJAX malfunction

I am encountering an issue where I am trying to execute an ajax function only after the user confirms a dialogue using JQUERY confirm. Strangely, when I include the confirmation step, my code throws an error and does not function properly. It's worth ...

Guide on incorporating JavaScript code within a PDF document

Looking for guidance on implementing JavaScript in PDF files I am seeking advice from those familiar with adding JavaScript actions to PDF documents, as this is a new area of exploration for me. While I have experience with JavaScript in web development, ...

Guide on transforming a NaN value to 0 within an app.post function in a .js file

When I try to convert the value of question1 from NaN to 0 using parseInt in the code below, it doesn't seem to work. How can I properly convert it? app.post('/auth/total',function(req,res){ console.log(req.body); const { question1, ...

JavaScript FormData class does not recognize disabled and checked states on Bootstrap 5 switches

I am implementing a Bootstrap 5 switch input that I need to be mandatory, meaning it should be checked by default and not uncheckable. The official documentation suggests combining the attributes checked and disabled. However, it seems like the Javascrip ...

Tips on adjusting my script to focus on particular text within a div in HTML

I'm currently learning how to code and working on a text generator that allows users to edit text and export it as .DOCX. I came across this script called jsfiddl on the website npmjs, which enables exporting HTML to .DOCX. However, I'm having tr ...

AngularJS does not support the use of $(this) syntax

I have encountered an issue while developing a Chrome extension using AngularJS. I would like to add buttons to my popup page, and I want the ancestor node to disappear when a button is clicked. Here is the code snippet: in popup.html <div class="dea ...

Creating a foolproof image polling platform: A step-by-step guide

I'm in the process of creating a webpage on my site that allows users to view a collection of images. The goal is for each registered user to choose one picture as their favorite, increasing that picture's score by one. The image with the highest ...

Create a JavaScript/jQuery function that causes an element to fade in when the mouse is

I am currently developing a PHP/MySQL project that involves creating a function to display a brief description when a user hovers over an image. However, I seem to be encountering an issue where the function crashes after a few uses. Below is a snippet of ...