Блог

Главная - Вопросы по программированию - как мне передать url в методах vue js и запустить @click

как мне передать url в методах vue js и запустить @click

#javascript #vue.js

Вопрос:

Хорошо, итак, я делаю проект laravel vue js, и я хочу передать ссылку в методе (код ниже). по щелчку div я хочу перейти на сайт (www.google.com ), как показано ниже. Я пробовал некоторые решения, приведенные в похожих сообщениях здесь, но безуспешно.

 <template>
    <div style="cursor:pointer;" @mouseover="showMe" @mouseout="hideMe" @click="goToMySite">
        <h6 v-show="goTolink === false">Hover Me</h6>
        <h6 v-show="goToLink === true"> Click to visit My Site </h6>
    </div>
</template>
    
<script>
export default {
    props: [],
    
    data() {
        return {
            goTolink: false,
        }
    },

    methods: {
        showMe(){
            this.goTolink = true
        },
    
        hideMe(){
            this.goTolink = false
        },
    
        goToMySite(){
            href='http://www.google.com'
        }
    }
}
</script>
    
<style>
    
</style>

Ответ №1:

В вашем коде есть несколько проблем.

  • Слушатели не в лучшем месте. Установив его в родительском контейнере, ссылка никогда не появится, потому что ее родительский элемент больше не отображается.
  • Вы должны использовать mouseenter / mouseleave вместо mouseover / mouseout , который вызывает много ненужных событий
  • Вы должны использовать v-if / v-else вместо v-show этого в таком варианте использования.
  • href не существует в вашем goToMySite методе

Вот рабочий пример :

 <template>
    <div style="cursor:pointer;">
        <h6 v-if="! goTolink"
            @mouseenter="showMe">Hover Me</h6>
        <h6 v-else
            @mouseleave="hideMe"
            @click="goToMySite">Click to visit My Site</h6>
    </div>
</template>

<script>
export default {
    props: [],
    data() {
        return {
            goTolink: false,
            href: 'https://www.google.com'
        }
    },
    methods: {
        showMe() {
            this.goTolink = true
        },
        hideMe() {
            this.goTolink = false
        },
        goToMySite() {
            // Do what you want here, for example
            window.open(this.href, '_blank');
        }
    }
}
</script>

И фрагмент (window.open здесь не работает, но в обычном файле все в порядке) :

 <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
<div id="app">
  <div style="cursor:pointer;">
    <h6 v-if="! goTolink"
        @mouseenter="showMe">Hover Me</h6>
    <h6 v-else
        @mouseleave="hideMe"
        @click="goToMySite">Click to visit My Site</h6>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      goTolink: false,
      href: 'https://www.google.com'
    },
    methods: {
      showMe() {
        this.goTolink = true
      },
      hideMe() {
        this.goTolink = false
      },
      goToMySite() {
        // Do what you want here, for example
        console.log(`Let's visit ${this.href}`);
        window.open(this.href, '_blank');
      }
    }
  })
</script>
</body>

</html>

Кстати, несколько советов :

  • Не используйте встроенный стиль
  • Если вы не хотите обрабатывать различия между false , null и undefined , вы можете проверить, не существует ли значение с помощью ! value (и только value если вы хотите знать, определена ли переменная)
  • Возможно, здесь было бы более уместно использовать a тег для вашей ссылки (и оформить его так, чтобы он выглядел как ваш h6 )

Вы также можете обработать изменение goToLink значения некоторыми другими способами (но это субъективный выбор). Например, в шаблоне (чтобы вы могли удалить методы showMe и hideMe ) :

 <h6 v-if="! goTolink"
    @mouseenter="goTolink = true">Hover Me</h6>
<h6 v-else
    @mouseleave="hideMe"
    @click="goTolink = false">Click to visit My Site</h6>

или

 <h6 v-if="! goTolink"
    @mouseenter="goTolink = ! goTolink">Hover Me</h6>
<h6 v-else
    @mouseleave="hideMe"
    @click="goTolink = ! goTolink">Click to visit My Site</h6>

или сохранить только один метод для переключения :

 <h6 v-if="! goTolink"
    @mouseenter="toggleLink">Hover Me</h6>
<h6 v-else
    @mouseleave="toggleLink"
    @click="toggleLink">Click to visit My Site</h6>
 
 methods: {
    toggleLink() {
        this.goTolink = ! this.goTolink;
    }
}

Ответ №2:

Используйте location объект window .

 goToMySite(){
    window.location.href='http://www.google.com'
}
Метки: