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>
Related
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,
}
}
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')
}
}
Hello how i can get the element by className or something else. So i need to get element by className actually but i can't figure out how to do that in this case:
here is my fiddle: https://jsfiddle.net/cihanzengin/aq9Laaew/294154/
Simply i wanna do that: When click to menu in method i try to get element which have classname nav. I tried to make with ref but i can't
here is my code :
<div id="app">
<some-component #get-element="getElement"></some-component>
</div>
<script>
var someComponent = Vue.component("some-component", {
template: `
<div class="columns mobile-navigation">
<div class="column drawer">
<a class="is" #click="$emit('get-element')">MENU</a>
</div>
<div ref="nav" class="column mobile-nav-wrapper">
<p> Some Text </p>
</div>
</div>
`
});
var app = new Vue({
el: '#app',
data: {
},
components: {
"mobile-nav": mobileNav
},
methods: {
getElement() {
console.log(this.$refs.nav);
}
}
});
</script>
You can try something like this.
var classToCheck = 'myclass';
if( this.$refs.nav.classList.includes(classToCheck) ){
// includes above class
}
OR
myclickevent(event){
event.target.classList // this will get you classList of of clicked element then you can compare
}
This contains all the classes for your element
this.$refs.nav.classList
i found the solution:
here is need to add **<some-component>** to ref attribute for accessing to ref inside jsx.
Then will possible to access to nav ref with: this.$refs.someRef.$refs.nav
<div id="app">
<some-component #get-element="getElement" ref="someRef"></some-component>
</div>
<script>
var someComponent = Vue.component("some-component", {
template: `
<div class="columns mobile-navigation">
<div class="column drawer">
<a class="is" #click="$emit('get-element')">MENU</a>
</div>
<div ref="nav" class="column mobile-nav-wrapper">
<p> Some Text </p>
</div>
</div>
`
});
var app = new Vue({
el: '#app',
data: {
},
components: {
"mobile-nav": mobileNav
},
methods: {
getElement() {
console.log(this.$refs.someRef.$refs.nav);
}
}
});
</script>
I am learning Vue.js hence new to it. I am having difficulty to check whether my class is bonded dynamically. I am trying to add effect: when I hover over a card it should go up a little bit and change its color. Besides, not just css but also custom events are also not working.
Here is my card component:
Vue.component('card', {
props: ['def'],
template: `
<div class="card" :class="'type-' + def.type" #click="play">
<div class="title">{{ def.title }}</div>
<img class="separator" src="svg/card-separator.svg" />
<div class="description">
<div v-html="def.description"></div>
</div>
<div class="note" v-if="def.note">
<div v-html="def.note"></div>
</div>
</div>
`,
methods: {
play() {
this.$emit('play')
this.$emit('test_event_with_args', 'str_arg', 777)
}
},
mounted() {
this.$on("play", ()=> {
console.log("custom event play ni tutdim ready hook ni ichida")
})
this.$on('test_event_with_args', (str, num) => {
console.log(`Test_Event: str=${str}, num=${num}`);
})
}
});
Here is an excerpt from my css file:
.card:hover{
top: -5px
}
.card.type-attack{
background:#9b1b1b
}
.card.type-special{
background:#751b9b
}
.card.type-support{
background:#1b6e9b
}
I'm using vue and I try to use img but every time I make the request it doesn't show anything this how I got the code.
app.js:
const vm = new Vue({
el: '#app',
data: {
results: []
},
mounted() {
axios.get("xxxxxxxxxx")
.then(response => {
this.results = response.data
})
}
});
html:
<div class="container" id="app">
<h3 class="text-center">VueNews</h3>
<div class="columns medium-3" v-for="result in results">
<div class="card">
<div class="card-divider">
{{ result.titulo_periodico }}
</div>
<div class="card-section">
<img src="{{ result.photos[0].urls[2].original }}" alt="">
<p>{{ result.photos[0].urls[2].original }}</p>
</div>
</div>
</div>
</div>
The main information it work like the title and even display the url but when I try to use it with img src="" it doesn't do anything
I will really appreciate if you can help me it this issue.
The src attribute needs to be set as a bound attribute.
<img v-bind:src="result.photos[0].urls[2].original" alt="">