When working on a Vue project, the Navbar @click functionality seems to

Having trouble with my navbar search form

<form action="" method="post" class="search">
    <input type="text"  name="" placeholder="поиск" class="input" v-model="allsearch"/>
    <a href="#" @click='clicksearch()'>0</a>
</form>

The script I'm using:

<script>
  export default {
    name: 'Navbar',
    data () {
      return {
        allsearch:''
      }
    },
    methods: {
      clicksearch(){
        console.log(this.allsearch)
      }
    }
  }
</script>

App.vue:

<template>
    <div id="app">
        <Navbar />
        <router-view/>
        <Footer />
    </div>
</template>

<style>
  @import "assets/css/default.css";
  @import "assets/css/header.css";
  @import "assets/css/shortcodes.css";
  @import "assets/css/core.css";
  @import "assets/css/style.css";
</style>

<script>
    import Navbar from "./components/Navbar";
    import Footer from "./components/Footer"
    export default {
        components: {Navbar, Footer}
    }
</script>

Router information:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Posts from './views/Posts'
import Single from './views/Single';
import Smartigadget from './views/Smartigadget';
import Applesmartphone from './views/Applesmartphone';

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'posts',
        component: Posts,
    },
    {
        path: '/:id',
        name: 'Single',
        component: Single,
        props:true
    },
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

Error encounter:

https://i.sstatic.net/tN0jB.jpg

Answer №1

@click='executeSearch()'

Make sure to use

@click='executeSearch'

Otherwise, the @click event will be bound to the return value of executeSearch function.

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

JavaScript confirmation for PHP delete button

Is there a way to implement a JavaScript alert that prompts the user to confirm their action when they click the delete button? I attempted to integrate a class into an alert box: <?php //$con = mysqli_connect("localhost", "root", "root", "db"); $sql ...

Showing list data from script to template in vue - A step-by-step guide

My task involves displaying data from the main table in MySQL. I need to show the type of each major by comparing it with the id in the faculty table. I have successfully logged this information using console.log, but I'm unsure how to display it on t ...

The web page's content remains hidden until it is scrolled into view, despite the fact that the page has finished loading

I'm a beginner with Angular and currently working on creating a website. On the following page , when viewed on mobile, I am experiencing an issue where the content doesn't load until it's brought into view by scrolling down the page. I am u ...

Unable to successfully delete all channels in discord.js

I'm currently working on a bot designed to delete all channels within a Discord server. Here is the code I have written: const { Client, GatewayIntentBits } = require("discord.js"); const client = new Client({ intents: [ GatewayIntent ...

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

The constructor for audio in Next JS cannot be found

I'm facing an issue and struggling to find a solution. My project follows the standard structure of Next JS. In the root directory, I have included a components folder. Within the components folder, there is a component with the following code: imp ...

An error occurred in the defer callback: The specified template "wiki" does not exist

I recently developed a Meteor package called Wiki. Within the package, I included a wiki.html file that contains: <template name="wiki"> FULL WIKI UI CODE HERE </template> Next, I created a wiki.js file where I defined my collections and eve ...

Tips for extracting and utilizing a JSON object provided by the parent page:

Sorry in advance if this question has already been addressed. I've spent hours searching on Google, but haven't found a satisfactory answer yet. Below is the code snippet I'm working with: <ion-content> <div class="list"> ...

Creating Vue components using just strings

I'm working with a string saved as a variable in javascript that contains both the <template> and <script> tags which could potentially be used in single file components within Vue. Let's take a look at an example: <template> ...

Tips for repeatedly clicking a button over 50 times using Protractor

Is it possible to click the same button more than 50 times using a loop statement in Protractor? And will Protractor allow this action? Below is my locator : var nudge= element(by.xpath("//a[@class='isd-flat-icons fi-down']")); nudge.click(); ...

Encountering a proxy error while attempting to create an account or log in, with no network

Embarking on my first web development journey, I utilized React-Redux to craft a React.js application within the client folder. For the backend code, I employed Node.js and MongoDb as my database. This project represents a significant milestone in my lear ...

Concealing Components using Angular's ng-change Feature

I need help displaying or hiding an element in a form using ng-change or any other method you suggest. Here is the HTML snippet I am working with: <div ng-app ng-controller="Controller"> <select ng-model="myDropDown" ng-change="changeState( ...

Unfortunately, the rest operator is not compatible with webpack when using Babel

Currently in my app, I am utilizing webpack and React. However, I have encountered an issue where webpack does not seem to be accepting the syntax var {id, ...data} = pulse;. Error: ERROR in ./src/main.js Module build failed: SyntaxError: Unexpected toke ...

The attempt to perform a Diffie-Hellman key exchange between Python and Node has hit a roadblock, as an error stating that

Currently, I am attempting to establish a DH key exchange between a Python 3.6 client and a Node server deployed in a Docker container with the latest node image (Node version: v13.10.1). On the client side, I am utilizing the cryptography.io library (v2. ...

What is the significance of having multiple route parameters in Express?

The RESTful API provided by cex.io offers a route that can return pairs of all currencies with a variable amount of parameters. In express, how can we achieve similar functionality? Consider the following pseudo code example... app.get('/pairs/:arg ...

Controller encounters a error when requiring a module

Struggling to set up Stripe for my app, I've encountered some issues with the module implementation. Typically, I would require a module at the top of the file to use it. However, in the paymentCtrl file, when I do this, it doesn't work and I rec ...

Managing date validation for a three-part field using AngularJS

I am currently working on validating a three-part date field using AngularJS. I have managed to create a custom validation function, but I am struggling with determining how the fields should update each other's status. How can I ensure that all thre ...

create a recurring design wallpaper within the TinyMCE editor

One of my functions alters the background of the tinymce editor. However, I am interested in having a wallpaper repeat in a similar fashion to background-repeat: repeat; in CSS. How can I achieve this? Here is the function: function SettinymceImage(bg_i ...

Is it possible to establish a CSS minimum width that is relative to a different element?

Is it possible to set the min-width of a submenu in CSS to be equal to that of the corresponding link in a navigation menu? I am using LESS for my styling. <ul> <li> <a href="">Item FooBarBaz</a> <ul class="submenu"&g ...

"Exploring the world of JavaScript, Ajax, PHP parser errors, and the process of obtaining post data

Having an issue with the AJAX functionality in my game.php file. Despite my efforts to refresh .refre, I keep encountering a "parsererror" message. The jsonString variable is created using JSON.stringify(object). <div class="refre"></div> < ...