I'm using OneGraph to pull data from Spotify. I can't figure how to render out the 3rd nested loop though even looking at other Vue code samples. I'm trying to return the artist name for each playlist as shown below.
<template>
<ul>
<li v-for="(item, index) in $page.oneGraph.spotify.me.playlists" :key="index">
<ol>
<li v-for="track in item.tracks" :key="track.playlists">
{{track.name}} -
<span v-for="artist in item.tracks.artists" :key="artist.tracks">
{{artist.name}}
</span>
</li>
</ol>
</li>
</ul>
</template>
The query:
{
spotify {
me {
id
playlists(limit: 1) {
name
tracks {
name
artists {
name
}
}
}
}
}
}
Nested loop:
<li v-for="track in item.tracks" :key="track.playlists">{{track.name}}</li>
Child nested loop:
<span v-for="artist in track.artists" :key="artist.tracks" {{artist.name}}</span>
Related
I'm trying to show the datatime in a v-for, but it just keeps showing the same time over and over.
Is there a way to do this?
v-for -
<div class="location-box-container">
<ul class="location-box-list">
<ol v-for="(location, index) in lineStringData" :key="lineStringData.id">
<p class="locations">{{ location_time }} New Location</p>
</ol>
</ul>
</div>
JS -
data() {
return {
location_time: new Date().toLocaleTimeString(),
}
},
Use a method to lookup time. Not sure where you are storing the time, but you can look up timezone from coords if needed.
<div class="location-box-container">
<ul class="location-box-list">
<ol v-for="(location, index) in lineStringData" :key="lineStringData.id">
<p class="locations">{{ getTime(location) }} New Location</p>
</ol>
</ul>
</div>
methods: {
getTime(location) {
// lookup your timezone, etc here.
return new Date(location.theTime).toLocaleTimeString()
}
}
Is there a function in Laravel Livewire that allows the value property of a html element (be it a radio button, checkbox, dropdown list or textbox) to be passed into a function?
For example: I have on a page a list. This list consists of different cooked dishes. I select a dish from the list by clicking on it and the value passed. Can this value be passed into a function?
LiveWire Controller
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Dishes extends Component
{
public function showRecipe($value)
{
//query database or some conditional logic
}
public function render()
{
return view('livewire.dishes')
}
}
LiveWire Component
<div>
<ul>
<li value="pizza" wire:click="showRecipe(this.value)">Pizza</li>
<li value="cherry_pie" wire:click="showRecipe(this.value)">Cherry Pie</li>
<li value="beef_stronganoff" wire:click="showRecipe(this.value)">Beef Stroganoff</li>
<li value="caesar_salad" wire:click="showRecipe(this.value)">Caesar Salad</li>
<li value="lobster_newburg" wire:click="showRecipe(this.value)">Lobster Newburg</li>
</ul>
</div>
value is not a valid attribute on an <li> tag. However, you can put an anchor-tag with a "prevent default" action it, or just keep the wire:click on the li and pass the data directly to the method.
<div>
<ul>
<li wire:click="showRecipe('pizza')">Pizza</li>
<li wire:click="showRecipe('cherry_pie')">Cherry Pie</li>
<li wire:click="showRecipe('beef_stronganoff')">Beef Stroganoff</li>
<li wire:click="showRecipe('caesar_salad')">Caesar Salad</li>
<li wire:click="showRecipe('lobster_newburg')">Lobster Newburg</li>
</ul>
</div>
If you generate this in a loop with PHP/blade, you should use wire:key on it. The key should be something unique, so Livewire can keep track of each individual record.
<div>
<ul>
#foreach([
'pizza' => 'Pizza',
'cherry_pie' => 'Cherry Pie',
'beef_stronganoff' => 'Beef Stroganoff',
'caesar_salad' => 'Caesar Salad',
'lobster_newburg' => 'Lobster Newburg',
] as $value=>$name)
<li wire:key="dish-{{ $loop->index }}" wire:click="showRecipe('{{ $value }}')">{{ $name }}</li>
#endforeach
</ul>
</div>
I need a simple v-for to render object properties in a list.
<div
v-if="profileData && profileData.length > 0"
>
<ul
v-for="value in profileData"
:key="value.id"
>
<li>{{value.id}}</li>
</ul>
</div>
In the script:
profileData: {},
created() {
const userId = this.$route.params.userId
const currentUser = this.$store.getters.currentUser
const profileData = this.$store.getters.profileData
console.log('profileData in seeProfile: ', profileData) }
(profileData comes from an api response)
I did exactly the same in two other pages (just rendering different objects) and it worked.
With this code, in the console I get value is undefined.
If I remove :key="value.id" (it becomes red in the editor but it still works), and instead of the list items I type only {{ value }}}, then the object properties get rendered ( but in the ugly format of a js object). How can it be? What am I doing wrong?
Thank you
Your v-if will never show even if profileData has data, because you can't directly check for the length of an Object in javascript.
A few things:
You can't check for the length of an Object, it will return undefined. If you must use an object, then you'd have to check for Object.keys(obj).length.
let obj = {
first: {
name: "first",
meta: "data"
},
second: {
name: "second",
meta: "data"
}
};
console.log("Object.length is: ", obj.length);
console.log("Object.keys().length is: ", Object.keys(obj).length);
You're being redundant, you don't need to check for profileData and its length (and you don't need to > 0), you could simply check for v-if="Object.keys(profileData).length". If the Object has zero entries, then it won't show because if(0) is false.
I'd strongly recommend to work with arrays to iterate with v-for. I'd use computed properties and return an array, and iterate through that. Object reactivity works non-intuitively in JS, so you'll be scratching your head later when you try to find out why stuff isn't updating on your view:
computed: {
listData() {
let list = Object.values(this.profileData);
return list;
}
}
In view:
<div v-if="listData.length"/>
Also, don't use the array's entry index as your :key, because if you have another array with v-for, you'll have duplicated keys in your model. I'd use something like v-for="(item, key) in list" :key="'list-item-' + key"
Put the v-for on the li, not the ul.
<ul>
<li v-for="value in profileData"
:key="value.id">{{value.id}}</li>
</ul>
Also , if your your profileData is an object and not an array, you need to decide if you want to loop through the keys or values.
<ul>
<li v-for="value in Object.values(profileData)"
:key="value.id">{{value.id}}</li>
</ul>
<ul>
<li v-for="value in Object.keys(profileData)"
:key="value.id">{{value.id}}</li>
</ul>
Or use Vue's default behavior.
<ul>
<li v-for="(value,key) in profileData"
:key="value.id">{{value.id}}</li>
</ul>
The api has been changed, so the working code is slightly different from the original one.
Here's the template:
<div
v-if="listData.length"
>
<ul>
<li>Name: <b>{{ profileData.user.first_name }}</b></li>
<li>Surname: <b>{{ profileData.user.last_name }}</b></li>
<li>Username: <b>{{ profileData.user.username }}</b></li>
<li>Car: <b>{{ profileData.if_cars_owned }}</b></li>
<li v-if="profileData.if_cars_owned === true">
Car model: {{ profileData.user_car_type }}
</li>
<li v-if="profileData.if_cars_owned === true">
Car power: {{ profileData.user_car_powered_by }}
</li>
<li>Motorcycle: <b>{{ profileData.if_motorcycle_owned }}</b></li>
<li v-if="profileData.if_motorcycle_owned === true">
Motorcycle model: {{ profileData.user_motorcycle_characteristic }}
</li>
</ul>
</div>
Script:
created(){
const profileData = this.$store.getters.profileData
this.profileData = profileData
console.log('profile data in profilo: ', profileData)
},
I've also updated
<div
v-if="listData.length"
>
and in the script
computed: {
...,
listData() {
let list = Object.values(this.profileData);
return list;
}
},
following the advice of #Adrián S. Basave.
Thanks to anyone who tried to help.
x
How can I switch the selected style easily?
In the template I have a nav:
<ul class="nav">
<li class="nav-item selected" #click="clickLi(0)"><router-link to="/">首页</router-link></li>
<li class="nav-item" #click="clickLi(1)"><router-link to="/data-center">数据中心</router-link></li>
</ul>
in the methods:
clickLi(page_num){
// there I have to clear all the li `selected` style, then add the style to the page_num.
}
in Vue whether there is a better way to realize this effect?
Take a look at Cass and Style Binding Docs
pseudo example below, also added some shorcuts to vue-router to avoid the router-link component, you just can bind the :to to the <li>
<li
v-for="(item, $index) in routes"
#click="selectedIndex = $index"
:class="{'item-selected': $index == selectedIndex}"
:to="item.path">{{ item.name }}</li>
// on component
data() {
return {
selectedIndex: null,
routes: [{path:'/', name: 'home'},{path:'/data-center', name:'data center'}]
}
}
in the data you return a selected_num param:
data() {
return {
selected_num: 0
}
}
in your template:
<ul class="nav">
<li class="nav-item" :class="selected_num===0 ? 'selected' : ''" #click="selected_num=0"><router-link to="/">首页</router-link></li>
<li class="nav-item" :class="selected_num===1 ? 'selected' : ''" #click="selected_num=1"><router-link to="/data-center">数据中心</router-link></li>
</ul>
you even do not need the method.
I need to get the index of the li.play relevant to the ul.showreel_thumbnails. Is this even possible? All i seem to get is the li index inside ul.row
<ul class="showreel_thumbnails">
<li>
<ul class="row">
<li class="play_video">item</li>
<li class="play_video">item</li>
<li class="play_video">item</li>
</ul>
</li>
<li>
<ul class="row">
<li class="play_video">item 4</li>
<li class="play_video">item</li>
</ul>
</li>
</ul>
so if item 4 is clicked it should give me the index of 4 etc...
best, Dan.
It may not be valid HTML but here's how it would work (with JQuery):
function FindMyCount()
{
var item_count = 0;
$("#showreel_thumbnails li").each(function() {
++item_count;
if($(this).hasClass("igotclicked"))
return false;
});
return item_count;
}
$("#showreel_thumbnails li").click(function() {
$(this).addClass("igotclicked");
var myCount = FindMyCount(); // 1 - the # of li's under the showreel piece
$(this).removeClass("igotclicked");
// Do what you want here.
});