Vue JS, Modal Window through components - javascript

I need to make the modal visible on click, I work through components, new Vue constructs do not work
I've never worked with Vue, now I'm asking for help
Error:
64:4 error 'showModal:' is defined but never used no-unused-labels
<template>
<modalPhoto v-if="showModal == 'true'"></modalPhoto>
<div class="block-inputs">
<div class="input-header">
<h3>Photos</h3>
</div>
<div class="photos">
<div class="photo-block">
<img src="../assets/photo.jpg" class="photo modal-img" v-on:click="viewPhoto('true')">
</div>
</div>
</div>
<div class="save-changes">
<div style="margin: 0 auto;">
<button class="button-add button-save">Save</button>
</div>
</div>
<script>
import modalPhoto from './modal/modalPhoto.vue';
export default {
name: 'Photos',
data() {
showModal: false
},
methods: {
viewPhoto() {
this.showModal = true;
}
},
components: {
modalPhoto,
}
}

Related

Vuejs v-bind v-for not populating into component template

with html
<div id="app">
<gallery v-bind:links="['link1.jpg', 'link2.jpg']" />
</div>
and component definition:
Vue.component('gallery', {
template: `
<div v-if="!isReady">
not ready
</div>
<div v-else>
<image-grp v-for="src in links">
<img v-bind:src="src">
</image-grp>
</div>
`,
data() {
return {
links: [],
isReady: false
}
},
mounted() {
this.links = this.$el.getAttribute('links').split(',')
this.isReady = true
console.log(this.links);
}
});
I've managed to produce this html:
<div links="link1.jpg,link2.jpg">
<div class="image">
<img src="">
</div>
<div class="image">
<img src="">
</div>
</div>
The images are not showing up because of the empty src. The src should be filled in during the loop on src in links. The array links must be filled properly, cause the html shows the same number of image-grp elements as are in the links array.
I have tried a variety of ways to populate/bind/mustache the src into the dynamic <img src=""> elements. Any guidance would be appreciated.
I don't see any problems with your code. It works.
But you should better make links to props, like this:
props: ['links']
Then, the other commented out lines are not needed.
Playground
Vue.component('gallery', {
props: ['links'],
template: `
<div v-if="!isReady">
not ready
</div>
<div v-else>
<image-grp v-for="src in links">
<img v-bind:src="src">
</image-grp>
</div>
`,
data() {
return {
//links: [],
isReady: false
}
},
mounted() {
//this.links = this.$el.getAttribute('links').split(',');
this.isReady = true;
}
});
const app = new Vue({
el: '#app'
})
img {
width: 100px;
height: 100px;
margin: 4px;
}
<div id="app">
<gallery v-bind:links="['https://i.stack.imgur.com/NxnaT.jpg?s=256&g=1', 'https://www.gravatar.com/avatar/50309120892edf29dcb2188bdabe3b08?s=256&d=identicon&r=PG']"></gallery>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#^2.0.0/dist/vue.min.js"></script>

Popup does not open in App.vue when clicking on a search result

My goal is when clicking on any search item to open the Popup.
Why does not work — this.$emit('openPopup', bookId); in the method selectBook(bookId)
There is a component of Results.vue, which displays search results by using Google Books API:
<template>
<div class="results">
<ul class="results-items">
<li
class="book"
#click="selectBook(result.id)"
>
<img
:src="'http://books.google.com/books/content?id=' + result.id + '&printsec=frontcover&img=1&zoom=1&source=gbs_api'"
class="cover"
>
<div class="item-info">
<div class="bTitle">{{ result.volumeInfo.title }}</div>
<div
class="bAutors"
v-if="result.volumeInfo.authors"
>
{{ result.volumeInfo.authors[0] }}
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['result'],
data() {
return {
bookId: '',
};
},
methods: {
selectBook(bookId) {
this.$router.push(`bookId${bookId}`);
this.$store.dispatch('selectBook', bookId);
this.$emit('hideElements', bookId);
this.$emit('openPopup', bookId);
},
},
};
</script>
Rusults screenshot
Is the main App.vue, which I want to display Popup:
<template>
<div id="app">
<div class="container">
<Header />
<popup
v-if="isOpenPopup"
#closePopup="closeInfoPopup"
#openPopup="showModal"
/>
<router-view/>
</div>
</div>
</template>
<script>
import Header from '#/components/Header.vue';
import Popup from '#/components/Popup.vue';
import 'bootstrap/dist/css/bootstrap.css';
export default {
components: {
Header,
Popup,
},
data() {
return {
isOpenPopup: false,
};
},
methods: {
showModal() {
console.log('click');
this.isOpenPopup = true;
},
closeInfoPopup() {
this.isOpenPopup = false;
},
},
};
</script>
The component Popup.vue
<template>
<div class="popup">
<div class="popup_header">
<span>Popup name</span>
</div>
<div class="popup_content">
<h1>Hi</h1>
<slot></slot>
<button #click="closePopup">Close</button>
</div>
</div>
</template>
<script>
export default {
name: 'popup',
props: {},
data() {
return {};
},
methods: {
closePopup() {
this.$emit('closePopup');
},
},
};
</script>
You are listening on popup component but triggering events on Result
Don't remember that events are bound to component.
You have several options how to handle it
Add event listeners (like #openPopup) only on Result component and use portal-vue library to render popup on top level
use global events, this.$root.emit and listen also on this.$root. In this case you add event listener in mount() hook and don't forget unregister it in beforeDestroy() hook
you can use Vuex and popup visibility and related data in global application store provided by Vuex

Vue.js how to use tabs to load different components

I am trying to use a click event on my tabs to set the value of a variable inside data() I then use this variable in an if statement on my components to test the value and display the component if true. But this isn't working and I'm getting no errors. I assume that the value of the variable isn't being set when the click event on the tabs fires. Can I not achieve the functionality with this method?
<template>
<div id="settings_page" class="page_body">
<h1>Settings</h1>
<div id="user_info" v-if="user">
<div id="tabs">
<div v-on:click="selected_tab == 'account'">Account Details</div>
<div v-on:click="selected_tab == 'divisions'">Divisions</div>
<div v-on:click="selected_tab == 'users'">Users</div>
<div v-on:click="selected_tab == 'columns'">Columns</div>
</div>
<div class="content">
<div v-if="selected_tab == 'account'">
<h2>Profile</h2>
</div>
<div v-if="selected_tab == 'divisions'">
divisions
</div>
<div v-if="selected_tab == 'users'">
users
</div>
<div v-if="selected_tab == 'columns'">
columns
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
data() {
return {
selected_tab: 'account'
}
},
computed:mapGetters(['user']),
methods: {
...mapActions(['getProfile'])
},
created() {
this.getProfile();
}
}
</script>
You're doing a comparison in the click event handler :
v-on:click="selected_tab == 'account'"
You should use assignment like :
v-on:click="selected_tab = 'account'"

Change modal window

I have 2 modal windows: register and login. When I click to "Sign Up" button, the modal window should change. What should I do?
This is a project link.
https://jsfiddle.net/Alienwave/0kqj7tr1/4/
Vue.component('signup', {
template: '#signup-template'
})
Vue.component('login', {
template: '#login-template',
data() {
return {
loginInput: '',
passwordInput: ''
}
},
methods: {
sendRequest(e) {
//code not here
},
changeModal() {
// THIS!!
}
}
});
new Vue({
el: "#app",
data() {
return {
showLogin: true,
showSignup: false
}
}
});
This is login template:
<template id="login-template">
<transition name="modal">
<div class="login-mask">
<div class="login-wrapper">
<div class="login-container">
<div class="login-footer">
<slot name="footer">
<div class="change-mode">
<button class="change-mode-reg" #click="">Sign up</button> <!-- THIS BUTTON SHOULD CHANGE MODAL! -->
</div>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
Register template looks the same.
I cut a big chunk.
This is a good use case for Vue's custom events. I would update your code as follows:
#login-template
...
<div class="login-footer">
<slot name="footer">
<div class="change-mode">
<button class="change-mode-reg" #click="changeModal">Sign up</button>
<div class="change-mode-line"></div>
</div>
</slot>
</div>
...
login component
Vue.component('login', {
template: '#login-template',
data() {
return {
loginInput: '',
passwordInput: ''
}
},
methods: {
sendRequest(e) {
//code not here
},
changeModal() {
this.$emit('change');
}
}
});
#app
<div id="app">
<login v-if="showLogin" #close="showLogin = false" #change="changeModal"></login>
<signup v-if="showSignup" #close="showSignup = false"></signup>
</div>
Here is an updated fiddle.
(NOTE: it looks like you might have some other issues going on here, but this gets your modal switching issue fixed.)

How to load images of a directories in vue

I am starting to learn vue.js and the following problem has been presented to me, I am creating an SFC and when exporting the images inside the folder src / assets / logo.png I do not load the image, this is the code:
<template>
<div id="app">
<div class="row">
<img :src="imagen" alt="" id="">
<div class="col s12 m4">
<your-list></your-list>
</div>
</div>
</div>
</template>
<script>
import YourList from './components/YourList'
export default {
name: 'app',
components: {
'your-list': YourList
},
data() {
return{
imagen: './assets/logo.png'
}
}
}
</script>
<style lang="scss">
</style>
The solution I have found is to import the logo in the following way:
<template>
<div id="app">
<div class="row">
<img :src="imagen" alt="" id="">
<div class="col s12 m4">
<your-list></your-list>
</div>
</div>
</div>
</template>
<script>
import YourList from './components/YourList'
export default {
name: 'app',
components: {
'your-list': YourList
},
data() {
return{
imagen: './assets/logo.png'
}
}
}
</script>
<style lang="scss">
</style>
I added an import to bring the image and be able to show it, my doubt would be if I have to use 20 images I would have to do it that way, I do not know if it is the most optimal way. I'm using # vue/cli
You can use require to make webpack resolve it correctly.
data() {
return {
imagen: require('./assets/logo.png')
}
}

Categories