Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: make router useLink link reactive #19386

Merged

Conversation

Antti-Palola
Copy link
Contributor

@Antti-Palola Antti-Palola commented Mar 12, 2024

Description

If for example VCard to prop is evaluated as undefined and then changed, the changes were not be propagated to the href.

fixes #19300

Card link after enabling link (from undefined to page2)

Before After
router-before router-after

Markup:

<template>
  <v-app>
    <v-container>
      Click button to toggle link state on list item
      <v-breadcrumbs active-color="primary">
        <v-breadcrumbs-item active>Hello</v-breadcrumbs-item>
        <v-breadcrumbs-divider>/</v-breadcrumbs-divider>
        <v-breadcrumbs-item to="/page2">Page 2</v-breadcrumbs-item>
      </v-breadcrumbs>
      <v-btn @click="setLink">Set link</v-btn>
      <v-list>
        <v-list-item :to="listLink" color="green">{{ `Link to ${listLink?.name}` }}</v-list-item>
        <!-- <v-list-item :to="{name: 'page1'}">Working link</v-list-item> -->
      </v-list>
      <v-card :to="listLink">
        <v-card-title>Linked card</v-card-title>
        <v-card-text>{{ `Link to ${listLink?.name}` }}</v-card-text>
      </v-card>
    </v-container>
  </v-app>
</template>

<script>
  import { ref } from 'vue'
  export default {
    name: 'Playground',

    setup () {
      const listLink = ref(undefined)
      function setLink () {
        if (listLink.value) {
          listLink.value = undefined
        } else {
          listLink.value = { name: 'page2' }
        }
      }
      return {
        listLink,
        setLink,
      }
    },
  }
</script>

@Antti-Palola
Copy link
Contributor Author

Antti-Palola commented Mar 13, 2024

The breadcrumbs cypress test is failing locally for me as well but I updated the Playground example to contain a breadcrumb too and it's working as it's supposed to.

This happened because of nonexistent route from previous test. Fixed now.

@Antti-Palola Antti-Palola force-pushed the bugfix/reactive-router-link branch 3 times, most recently from 15ae629 to 3012762 Compare March 14, 2024 21:30
@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VBreadcrumbs VBreadcrumbs labels Mar 14, 2024
@johnleider johnleider requested a review from KaelWD March 15, 2024 23:25
@johnleider johnleider added this to the v3.5.x milestone Mar 15, 2024
If for example VCard or VListItem `to` prop is evaluated as undefined and
then changed, the changes were not be propagated to the href.

Breadcrumbs now validates the routes so a fix to tests is required.

fixes vuetifyjs#19300
@johnleider johnleider merged commit 7cca1b5 into vuetifyjs:master Mar 26, 2024
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VBreadcrumbs VBreadcrumbs T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.5.6] v-list-item initialized with an empty "to" property stays without an href
3 participants