<li v-for="(size, index) in sizes" :key="index">{{ size }}</li>
I'm new to VueJS and I'm playing around with Vue Directives. I wanna know where to get the list of :key values in the console log or developer tools. For now, I'm setting it to id attribute and reading it. Appreciate any kind of help
If you're just playing around with it and want to be able to log it to console, you could add a log function to your methods
methods:{
log(..args){
console.log(...args)
}
}
then you can use the log function anywhere and pass it the same value
<li v-for="(size, index) in sizes" :key="index">{{ size }}{{log(index)}}</li>
...but that only works if you can pass the same value to both
Example:
Vue.createApp({
data: () => ({
items: ['a', 'b', 'c']
}),
methods: {
log(...args) {
console.log(...args)
},
},
}).mount("#app");
<script src="https://unpkg.com/vue#3.2.0/dist/vue.global.prod.js"></script>
<div id="app">
<li v-for="(item, index) in items" :key="index">{{ item }}{{log(index)}}</li>
</div>
Related
I'm trying to create a list where every list item contains a button and i want a user to be able to click multiple button. I'm generating my list like so:
<ul>
<li v-for="item in items" :key="item.id">
<button type="button">{{item.title}}</button>
</li>
</ul>
but the problem with my code is whenever a user click a button, it turns the rest of the buttons to "unclicked". been trying to play with the focus and active stats but even with just css i cant get to enable multiple select .
i did manage to change the look of the current selected button:
button:focus {
outline: none;
background-color: #6acddf;
color: #fff;
}
any idea how can i allow multiple buttons to be clicked?
to make things a bit clearer, i am going to create an AJAX call later and pass the item.id of each item where it's button is clicked
I would much rather avoid changing the data structure if possible
Well you have to store somewhere that you clicked on the clicked item.
If you can't edit the items array then you can always create a new one, like isClicked where you store those values.
new Vue({
el: '#app',
data: {
items: [{
id: 1,
title: 'foo'
},
{
id: 2,
title: 'bar'
},
{
id: 3,
title: 'baz'
}
],
isClicked: []
},
beforeMount() {
// set all values to false
this.items.forEach((item, index) => this.$set(this.isClicked, index, false))
},
methods: {
clicked(index) {
// toggle the active class
this.$set(this.isClicked, index, !this.isClicked[index])
}
}
})
.active {
background: red
}
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button #click="clicked(index)" :class="{'active': isClicked[index]}">{{item.title}}</button>
</div>
</div>
Or you can use vuex for storing those values.
However you can just use Vues event to manipulate the classList property, like:
new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5, 6, 7]
}
})
.active {
color: red
}
<script src="https://unpkg.com/vue"></script>
<div id="app">
<button v-for="i in items" #click="e => e.target.classList.toggle('active')">{{ i }}</button>
</div>
But it doesn't feel right, IMHO.
Also you can use cookies or localStorage to store those states. So it's really up to you.
Use id attribute for list items to make it unique.
<ul>
<li v-for="item in items" :key="item.id" :id="item.id">
<button type="button" #click="doThis">{{item.title}}</button>
</li>
</ul>
new Vue({
el: '#app',
data: {},
methods: {
doThis() {
// Use this to access current object
}
}
});
I am trying to get the selected value to update in my vue component, but it doesn't change and stays empty instead, i can select things but i can't do anything with it.
I have tried adding :value to the v-select component, but it just doesn't update the value whenever i select something.
Since i am still trying this with the example from their documentation, i made a fork on codepen here: https://codepen.io/andyftp/pen/GweKpP so you can try it out.
Anyone can help me here?
HTML:
<div id="app">
<h1>Vue Select - Ajax</h1>
<v-select label="name"
:filterable="false"
:options="options"
:selected="selected"
#search="onSearch"
><template slot="no-options">
type to search GitHub repositories..
</template>
<template slot="option" slot-scope="option">
<div class="d-center">
<img :src='option.owner.avatar_url'/>
{{ option.full_name }}
</div>
</template>
<template slot="selected-option" scope="option">
<div class="selected d-center">
<img :src='option.owner.avatar_url'/>
{{ option.full_name }}
</div>
</template>
</v-select>
Selected: {{ selected }}
</div>
JS:
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
selected: null, // this needs to be filled with the selected value (id or object), but it stays empty
options: []
},
methods: {
onSearch(search, loading) {
loading(true);
this.search(loading, search, this);
},
search: _.debounce((loading, search, vm) => {
fetch(
`https://api.github.com/search/repositories?q=${escape(search)}`
).then(res => {
res.json().then(json => (vm.options = json.items));
loading(false);
});
}, 350)
}
});
JSBin and Stackoverflow snippet are below.
I am trying to have a list of input components. If all input components are filled with a value (not blank), then there should be a "new blank field" visible at the end for the user to type into. When he types into it, it should make this field apart of the list above it, maintaining focus in it.
However the problem I'm having is, focus maintains in the new field, and never moves into the array. Here is my code:
JSBIN and stackoverflow snippet - https://jsbin.com/cudabicese/1/edit?html,js,output
const app = new Vue({
el: '#app',
data: {
inputs: [
{ id:'foo', value:'foo' },
{ id:'bar', value:'bar' }
]
},
methods: {
addRow(e) {
this.inputs.push({
id: Date.now(),
value: e.target.value
})
},
deleteRow(index) {
this.inputs.splice(index, 1)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
<ul>
<li v-for="(input, index) of inputs">
<input type="text" v-model="input.value">
</li>
<li v-if="inputs.filter(input => !!input.value).length">
<input type="text" #input="addRow">
</li>
</ul>
</div>
I'd recommend you put the input for the list within a computed function vs directly using the data. The examples at https://v2.vuejs.org/v2/examples/ are a good place to start.
I'm having a difficult time understanding slots for some reason and why they should even be used. The only reason I can think of that would be nice for usuage is if we can reference specific properties within a v-for loop of an element and output different templates quicker perhaps...
So, am thinking, and possibly I could be wrong in thinking this, but if I have a variable like so:
<script>
const items: [
{
label: 'My Label',
url: '#',
headerTitle: 'My Header Title'
},
{
label: 'My Label 2',
url: 'https://www.myurl.com',
headerTitle: 'My Header Title 2'
},
{
label: 'My Label 3',
url: 'https://www.myurl3.com'
}
]
export default {
data () {
return {
items: items
}
}
}
</script>
And than in the template, possibly this:
<template>
<div v-for="(item, index) in items" :key="item.id">
<template slot-scope="headerTitle">
<h1>{{ item.headerTitle }}</h1>
</template>
<template slot-scope="label">
<div class="mylabel">
{{ item.label }}
</div>
</template>
<template slot-scope="url">
<a :href="item.url">{{ item.label }}</a>
</template>
</div>
</template>
I don't know if this makes sense or not, but basically using the property as a slot-scope and than for everytime that property is defined, it will output something. But this doesn't work properly. Is this not what slot-scopes are for within component v-for loops? Is this not how to use these properties of an array of objects?
This kinda makes sense to me. Anyways to do it like this perhaps?
<template>
<li v-for="r in recent">
{{r}}
</li>
</template>
recent is an array .
I don't want to list contents of recent from 0 to n-1 .
Instead i want to list it from n-1 to 0.
I tried ->
<template>
<li v-for="r=recent.length-1 ; r>=0 ; r--">
{{r}}
</li>
</template>
But, it didn't work.
Solution 1: Reverse array directly in template
You can actually reverse the array directly in your template before iterating through it, using recent.slice().reverse(). Using .slice() is necessary because this.recent is actually not an array per se. However, I do not prefer this method because it means placing logic in your template.
<template>
<li v-for="r in recent.slice().reverse()">
{{r}}
</li>
</template>
new Vue({
el: '#list',
data: {
recent: [
'Lorem',
'ipsum',
'dolor',
'sit',
'amet'
]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<ul id="list">
<li v-for="r in recent.slice().reverse()">
{{ r }}
</li>
</ul>
Solution 2: Use a computed property
As what #vbranden has said, you can simply reverse an array in a method and use it in v-for. This is my preferred method.
new Vue({
el: '#list',
data: {
recent: [
'Lorem',
'ipsum',
'dolor',
'sit',
'amet'
]
},
computed: {
recentReversed: function() {
return this.recent.reverse();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<ul id="list">
<li v-for="r in recentReversed">
{{ r }}
</li>
</ul>
You should use Array.prototype.reverse()
Source : link
In your computed
export default Vue.extend({
name: 'mainActivity',
data (){
return{
stuff: ['a', 'b', 'c', 'd']
}
},
computed:{
reverseArray(){return this.stuff.reverse()}
},
created(){}
})
HTML
<template>
<li v-for="r in reverseArray">
{{r}}
</li>
</template>
There is no for-loop form of v-for. There is a range form, which you can use to get the effect you want (with a little simple math).
You could do the same thing with a computed, as vbranden noted in his comment.
new Vue({
el: '#app',
data: {
stuff: ['a', 'b', 'c', 'd']
},
computed: {
stuffIndexCountdown() {
return this.stuff.map((_, i) => i).reverse();
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<div v-for="i in stuff.length">
{{stuff.length - i}}
</div>
<hr>
<div v-for="i in stuffIndexCountdown">
{{i}}
</div>
</div>