I have two components.
The first one is a header with an image.
The second one is a div with a list.
I need to click the image (in the first component) to show the list (second component) and click it again to hide it.
The div should replace all the content below the image (so I can click the image again to hide the div and show default content).
Please see the picture for details. Links to the code below.
The code:
Component with the picture which has to work with v-on:click
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/main-header.vue
Component which supposed to appear/disappear when I click the picture in component 1
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/menu.vue
Component which supposed to be shown by default, but disappear or being covered by component 2
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/main-page-content.vue
App.vue
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/App.vue
And main.js
https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/main.js
You need to read up on on click handlers in Vue, and binding the v-dom to data variables.
Here's an example:
JS:
var vue = new Vue({
el:"#app",
data: {
isShowing:false,
}
})
v-dom:
<div id="app">
<iframe v-show="isShowing" src="http://www.weather.gov/"
frameborder="0"
></iframe>
<button #click="isShowing ^= true">Click Me</button>
</div>
Demo: https://codepen.io/michael_coder/pen/WReNNm
var app = new Vue({
el: '#app',
data: {
Hide: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-on:click="Hide = !Hide">Click Me</button>
<div v-if="!Hide"><ul><li>One</li>
<li>Two</li><li>Three</li><li>four</li><li>five</li><li>six</li></ul></div>
</div>
Related
I have a loop of data and have a modal for each loop
<div ref="vuemodal-{{loop.index}}">
It's a bootstrap modal and to each of them I want to bind an event whenever I close the modal
mounted(){
Object.keys(this.$refs).map((val) => $(this.$refs[val]).on("hidden.bs.modal",
this.doSomethingOnHidden))
}
I don't seem to access the object properly
First thing, your ref is not dynamic, it's a string. So make it dynamic by binding this using the bind (v-bind or :) operator.
Second thing, mustaches cannot be used inside HTML attributes, so {{loop.index}} won't work.
Here is the demo-
new Vue({
el: "#app",
mounted() {
Object.keys(this.$refs).map((val) => console.log(val))
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="index in 5" :ref="`vuemodal-${index}`">
It's a bootstrap modal and to each of them I want to bind an event whenever I close the modal
</div>
</div>
I'm learning how to use vue.js
I've a shared hosting plan where I can only use html. I'm fetching the data I need using axios and a remote wordpress installation that will act as a backend only. What I need to know, is how I can change the DOM content of the index.html using vue if the user click on a link and I need to change the layout of the page because a different presentation for the contents is needed?
See the example:
<div id="vue-app">
link to layout 2
<div class="col-12">starting layout </div>
</div>
// after the user click the link (v-on:click) the layout change
<div id="vue-app">
link to layout 1
// layout change
<div class="col-6">new layout </div>
<div class="col-6">new layout </div>
</div>
Please read up on Conditional Rendering in Vue.js.
You can have a boolean variable in the data compartment of your script tag and change it on click.
And in the tags put v-if="your_bool_variable".
<div id="vue-app" v-if="layout_switch">
link to layout 2
<div class="col-12">starting layout </div>
</div>
// after the user click the link (v-on:click) the layout change
<div id="vue-app" v-else>
link to layout 1
// layout change
<div class="col-6">new layout </div>
<div class="col-6">new layout </div>
</div>
Negate the boolean variable at the #click event.
Data could look like the following:
<script>
export default {
name: "YourComponent",
data: () => {
return {
layout_switch: true
}
},
methods: {
changeLayout() {
this.layout_switch = !this.layout_switch;
}
}
}
</script>
Is there any way to hide the main div in a Vue app that is builded by Vue-CLI? I have tried appending display property but it didn't resolve the issue. I am trying to hide it inside the Channels component of mine. My main component looks like this :
<template>
<div id="app">
<Channels/>
</div>
</template>
<script>
import Channels from './components/Channels'
export default {
name: 'App',
components: {
Channels
}
}
</script>
You can use <template> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<p>
Am I wrapped around Div or Template?
</p>
</template>
</div>
<script>
new Vue({
el: "#app"
})
</script>
You can inspect the parent of p tag in developer tools. It is div instead of template
you mean <div id="app">?, you can delete it directly, but you should maintain that three is only one root in <template>
I'm trying to make a login button as a single-file-component in Vue.js (it's a Rails app with a Vue.js front-end). If you click this button, it's supposed to take you to the an external provider's login page.
How can I use an image as a button? I'm guessing you use v-on:click for the actual redirect, but I'm stuck there.
Right now, this code below shows a hardcoded button that looks like img(src="../assets/img/login_button.png"). You can click on it, but that's obviously not what I want. I want to show the actual png image, not the path.
// LoginButton.vue
<template lang="pug">
#login-button
<button v-on:click="redirect_to_login">img(src="../assets/img/login_button.png")</button>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
#Component
export default class LoginButton extends Vue{
redirect_to_login():void{ // I haven't written this method yet
}
}
</script>
Is there any reason you can't just use normal HTML image inside your button? I haven't used pug before.
<button v-on:click="redirect_to_login"><img src="../assets/img/login_button.png" /></button
Though since you're using Vue and not an actual HTML form you might not even need a button you could just add the click binding to the image instead
<img src="../assets/img/login_button.png" v-on:click="redirect_to_login" />
I am not familiar with pug, so I don't know what the correct syntax you'll need is. But you can use the <router-link> tag to set the route. For example (using Vuetify)
<router-link to="/">
<v-img src="/path/to/img.gif"/>
</router-link>
Either you can use:
<a #click="Redirect">
<img src='IMAGE_SRC' />
</a>
or
<img #click="Redirect" src='IMAGE_SRC'/>
new Vue({
el: '#app',
methods:
{
Redirect()
{
window.location.href = "https://jsfiddle.net/";
//or
//this.$router.push('LINK_HERE'); // if ur using router
}
}
})
Demo LINK:
https://jsfiddle.net/snxohqa3/5/
EDIT: I forgot to clarify, what I'm looking for is to know how to write an anchor tag with the href attribute present but that when the element is clicked, the href should be ignored and the click handler should be executed.
I'm currently using Vue 1 and my code looks like:
<div v-if="!hasPage(category.code)">
<div>
<template v-for="subcategoryList in subcategoryLists[$index]" >
<ul>
<li v-for="subcategory in subcategoryList"v-on:click.stop="test()">
<a :href="subcategory.url">{{subcategory.label}}</a>
</li>
</ul>
</template>
</div>
</div>
What i'm trying to do is present the user with some buttons that represent my site's categories, some of this buttons will lead the user to another page and other will toggle a dropdown with a list of subcategories, when clicking these subcategories you will be taken to the subcategory's page.
These would be pretty simple but these buttons need to be tracked by Google Tag Manager so that's why I used the #click attribute to call a function and ignore the href attribute. This doesn't work, I have tried #click.prevent, #click.stop, #click.stop.prevent and none of these work.
The thing is that if I remove the href attribute, the #click method works great but an SEO requirement is to have href attributes on every link.
Any help would be appreciated.
As #dan-oswalt specified in the comments, you have to add the click event on the same element as the href. The reason it did not work the time you tried is most likely because you tried with #click.stop which only stops propagation, not the default action. (Redirect to the link). What you want is to prevent the browser to redirect the user: #click.prevent
new Vue({
el: '#app',
data: {
subcategoryList: Array(10).fill({
url: 'http://google.com',
label: 'http://google.com'
})
},
methods: {
test(event) {
event.target.style.color = "salmon"
}
}
})
Vue.config.devtools = false
Vue.config.productionTip = false
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<main id="app">
<template>
<ul>
<li v-for="subcategory in subcategoryList">
<a :href="subcategory.url" v-on:click.prevent="test($event)">{{subcategory.label}}</a>
</li>
</ul>
</template>
</main>