Issue with button clicking

I'm attempting to use :to to direct the button to another page, but it's not working right now. As a test, I'm currently trying to direct it to the existing /learn page.

Here is my code:

  <b-navbar-item tag="div">
                <div class="buttons">
                    <a class="button is-primary"
                v-for="item in menuItems" 
                :key="item.title"
                :to="item.link">
                        {{item.title}}
                        </a>    
                </div>
            </b-navbar-item>

export default {
    data() {
      return {
           menuItems: [
       { title: 'Login', link: '/learn'},
       { title: 'Sign up', link: '/learn'},
       { title: 'Logout', link: '/learn'},

      ]
      }
javascriptvue.js

Answer №1

Vue Router utilized? I'm not well-versed in Vue.js, however, my understanding is that the v-bind:to attribute is commonly applied to <router-link> components. When dealing with regular links using the <a> tag, you can use either v-bind:href or simply :href to set the link:

Envisioning a scenario where you are creating a menu in Vue.js:
new Vue({
  el: '#app',
  data: {
    menuItems: [
      {
        title: 'Login',
        link: '/link1'
      },
      {
        title: 'Sign up',
        link: '/link2'
      },
      {
        title: 'Logout',
        link: '/link3'
      }
    ]
  }
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <div class="buttons">
    <a class="button is-primary" v-for="item in menuItems" :key="item.title" :href="item.link">
      {{ item.title }}
    </a> 
  </div>
</div>

Answer №2

To make this function properly, you must incorporate VueRouter and replace the <a> tag with the <router-link> component. If it is absolutely necessary to use an <a> tag, you can utilize the scoped-slot feature of the <router-link>

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

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

Converting Date Format According to Visitor's Time Zone in VueJs/JS

I have a Date in string Format: 2020-07-13 7:07 AM (which is indian time). I am looking to adjust this time according to the browser's time zone, which could be either in the US or Africa. I have attempted various methods to convert it accurately. He ...

javascriptvue.jsmomentjsmoment-timezone

Exiting a void method in JavaScript/Typescript using the return or break statement

I find myself dealing with a complex method in Typescript that contains multiple if else if else constructs. It's a void method, and I'm wondering how I can exit the method based on a specific if condition without having to execute the remaining ...

javascripttypescript

Questions regarding prototype-based programming in Javascript

I am interested in achieving the following using Javascript: function A(){ this.B = function() { ... }; this.C = function() { <<I need to call B() here>> } ; }; I came across a method of method overloading, but I am curious to know ...

javascript

I am facing an issue with Angular where the $http.get method is

It seems like there must be a small oversight causing this apparently simple problem. I have a function that interacts with the Spotify API to search for an artist. I know that by accessing the corresponding route using a standard URL, a result is returne ...

javascriptangularjsnode.jsexpressspotify

Ways to eliminate a targeted key within a JSON reply

I'm working with a JSON response in postman and need to figure out how to remove a specific key from the data. In this case, I want to remove head_out_timestam - no matter where it is in the object tree. This needs to be done using javascript. Any he ...

javascriptjson

Angular JS presents an exciting feature called Multiple Filters, which allows

I have a data representation application that displays information in table format with columns id, name, price, quantity The data is presented using ng-repeat. You can view it on this Plunker <body ng-controller="myController"> <h1>Data< ...

javascriptangularjsfiltering

Transforming Poloniex API Callback JSON into a compatible format for Highcharts.Stockchart

I am currently working on a project that involves retrieving JSON data from Poloniex's public API method (specifically the returnChartData method) to generate a graph using Highchart Stockchart. The graph would display the historical performance of va ...

javascriptjsonapihighchartspoloniex

Issue encountered when attempting to upload an image using Laravel framework and Vue.js

I'm working on a single-page application using laravel and vuejs with vue-router. I've set up the routes in my api.php file for handling HTTP requests. However, I encountered an issue when trying to save data to my news table along with an image. ...

laravelvue.jsuploadvue-component

How can I send two responses in a single POST request using node.js?

Below is my router setup for handling responses: questionRouter.post('/questionsReply', (req, res) => { twilioResp(req, res); var newResponse = new Response(req.body); newResponse.save((err, data) => { if (err) return handleDBError(er ...

javascriptnode.jsmongodbexpresstwilio

Printing the elements of an array in a repetitive sequence

var arr = [a, b, c]; In this specific array setup, index 0 corresponds to "a", index 1 corresponds to "b", index 2 corresponds to "c". console.log(arr[0]) // will output > "a" console.log(arr[1]) // will output > "b" console.log(arr[2]) // will ...

javascriptarrays

The autocomplete feature is enabled for input using a mouse

I have a situation where I am using mouseleave handler to trigger Angular input errors when the mouse leaves the input field. Everything works perfectly in this scenario - the errors are highlighted as intended. However, I encounter an issue with the autoc ...

javascripthtml

Discover the power of incorporating AJAX functionality into your Node.js application using ejs

I'm currently exploring how to implement ajax in node.js. Here's what I have so far: How can I display the names from order[0] and order[1] inside my div with id="champ" when the button named Press is clicked? app.js var express = require("expr ...

javascriptajaxnode.jsejs

Attaching a pre-Ajax .load event handler to a DOM element for execution

I am in the process of developing a website that utilizes SWFUpload and extensive use of Ajax $('#maincontent').load(URL) to dynamically update the main view content. However, I have encountered an issue in IE 7+ where if there is an SWFUpload i ...

javascriptjqueryajaxloadswfupload

The use of script src with vue.js is causing issues

I am looking to move my Vue code into an external .js file. Since I am new to Vue, I am trying to keep it simple without using webpack. However, I have encountered an issue where Vue does not work when using the script src tag in the html file. For instanc ...

javascripthtmlvue.js

Is there a consistent order required when calling React Hooks in each component render?

After implementing keyboard key or button navigation in a list of items, I encountered errors during the build phase that do not occur locally. The specific errors are as follows: Error: React Hook "useRef" is called conditionally. React Hooks m ...

javascriptreactjsnext.jsreact-hooks

After a brief period of running, my AJAX request begins to malfunction

I'm attempting to automatically update two sections of my webpage every 4 seconds. Currently, my AJAX setup looks like this: setInterval(function () { autoUpdate() }, 4000); function autoUpdate() { $.get('/hello&a ...

javascriptjqueryajaxmongodbhandlebars.js

How to apply dynamic values for filtering in TypeScript?

My task is to filter out all Portfolio Lead who have English Competency set to No. var data = [{ "Employee Number": 138, "English Competency": "No", "Portfolio Lead": "x", "Maths Competency": "No" }, { "Employee Number": 1385, ...

javascriptarraysangulartypescriptfilter

Ways to capture server error in the getJSON method

I recently encountered an issue with error handling in my getJSON calls. Here is the calling code snippet: try { $.getJSON(uri) .done(function (data) { //perform actions with the result }).error(errorHandler()); } cat ...

javascriptjqueryasp.net-web-api

Search for data in Mongoose by utilizing a query object that has been obtained from a query string

After extracting and parsing a querystring from a URL, I am able to map it into an object structure like this: { '$and': [ { length: { '$gt': '2' } }, { length: { '$lt': '55555' } } ] } This object is st ...

javascriptexpressmongooseserver-side

Utilize the Spotify API to discover tracks by including the album title and artist's name in the search

Currently working on a project that involves searching for a music track on Spotify. The idea is to input the track name in the text area and generate a list of matching Track IDs along with Artist Names, Album Names, and Artwork. I have made some progress ...

javascripthandlebars.jsspotify