I'm very new to Vue syntax, so please forgive me (and feel free to correct!) my terminology and assumptions. In short, I have a very simple goal, to get values from an object where currently I am getting key names.
In the code I am trying to modify, there is a Vue object called "tags," part of a complete "video" object (returned from Vimeo), that, when bound in a Vue "x-template" script to html - like so:
<figure class="vimeography-thumbnail" :class="video.tags" >
...produces output like this:
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail name canonical name canonical name canonical" index="18">
The output we need instead would look more like this:
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail hands feet eyes" index="18">
In other words, "hands," "feet," and "eyes" would be the values of "canonical" for the set of three "tags." The "data" and "index" elements being output are, I believe, irrelevant.
I got as far as I did through some investigatory hacking around, and, though the result is wrong, I can see from page source that "name" and "canonical" are the correct key names, that the values I need are also present, and that the number of pairs of keys for each video thumbnail is as would be expected given each specific Vimeo video's number of tags.
I do see a lot of discussion about iterating over the object (or is it really an array?), but the :class shorthand seems already to be doing that, so I wonder if there isn't a simple shorthand way to get the values instead of keys. I tried video.tags.values and video.tags[canonical]just for the heck of it, but no luck.
Just to provide a larger context, the script is a template customization script for a WordPress plugin - Vimeography - that has already done the job of constructing the needed variables from the Vimeo API.
The larger template - for modifying gallery thumbnails - looks like this:
<script type="text/x-template" id="vimeography-timber-thumbnail">
<figure class="vimeography-thumbnail" :class="video.tags" >
<img class="vimeography-thumbnail-img" :src="thumbnailUrl" :alt="video.name" />
<figcaption>
<h2 class="vimeography-title">{{video.name}}</h2>
<div class="vimeography-description" v-html="video.description"></div><!-- try two -->
<router-link class="vimeography-link" :to="this.query" :title="video.name" exact exact-active-class="vimeography-link-active">View more </router-link>
</figcaption>
</figure>
</script>
A typical tags object looks like this in page source:
"tags":[{"name":"neck massage","canonical":"neckmassage"},{"name":"release","canonical":"release"},{"name":"shoulder pain","canonical":"shoulderpain"}]
So, as you can see if you return to the output example above, I'm getting the first and second key names "name" and "canonical" in sequence, separated by spaces, when what I need is each second key value.
On request - a video object - the "tags" appear around midway in it.
"466907727":{"uri":"\/videos\/466907727","name":"Headache Relief w\/ Ruth","description":"Give yourself some time with this one. If you feel a headache coming on or you can't get rid of one, try out these techniques to release face, jaw, and ear muscles that tense up throughout the day.","link":"https:\/\/vimeo.com\/466907727","duration":"11:43","width":1280,"height":720,"embed":{"buttons":{"like":true,"watchlater":true,"share":true,"embed":false,"hd":false,"fullscreen":true,"scaling":true},"logos":{"vimeo":false,"custom":{"active":true,"url":"https:\/\/i.vimeocdn.com\/player\/415649.png?mw=100&mh=100","link":"https:\/\/bodyworksdw.com","sticky":true}},"title":{"name":"show","owner":"show","portrait":"hide"},"playbar":true,"volume":true,"speed":false,"color":"ffffff","uri":"\/presets\/120692845","html":"<iframe src=\"https:\/\/player.vimeo.com\/video\/466907727?title=0&byline=0&portrait=0&speed=0&badge=0&autopause=0&player_id=0&app_id=27459\" width=\"1280\" height=\"720\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen title=\"Headache Relief w\/ Ruth\"><\/iframe>","badges":{"hdr":false,"live":{"streaming":false,"archived":false},"staff_pick":{"normal":false,"best_of_the_month":false,"best_of_the_year":false,"premiere":false},"vod":false,"weekend_challenge":false}},"created_time":"2020-10-10T17:17:42+00:00","privacy":{"view":"disable"},"pictures":{"uri":"\/videos\/466907727\/pictures\/972886256","active":true,"type":"custom","sizes":[{"width":100,"height":75,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_100x75?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_100x75&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},{"width":200,"height":150,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_200x150?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_200x150&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},{"width":295,"height":166,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_295x166?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_295x166&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},{"width":640,"height":360,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_640x360?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_640x360&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},{"width":1280,"height":720,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_1280x720?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},{"width":1280,"height":720,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_1280x720?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},{"width":1280,"height":720,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_1280x720?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},{"width":1280,"height":720,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_1280x720?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},{"width":1920,"height":1080,"link":"https:\/\/i.vimeocdn.com\/video\/972886256_1920x1080?r=pad","link_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_1920x1080&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"}],"resource_key":"0e08692aa74f2e89587bd88aedf898a1faa1ccb9","default_picture":false},"tags":[{"name":"Jaw","canonical":"jaw"},{"name":"Head","canonical":"head"},{"name":"Recover","canonical":"recover"}],"stats":{"plays":3},"metadata":{"connections":{"texttracks":{"uri":"\/videos\/466907727\/texttracks","options":["GET","POST"],"total":0}}},"user":{"account":"business"},"download":[{"quality":"sd","type":"video\/mp4","width":426,"height":240,"expires":"2021-05-16T10:05:23+00:00","link":"https:\/\/player.vimeo.com\/play\/2073102730?s=466907727_1621159523_101bba513873dd67b93c563f09e28890&loc=external&context=Vimeo%5CController%5CApi%5CResources%5CUser%5CAlbum%5CVideosController.&download=1&filename=Headache%2BRelief%2Bw%252F%2BRuth139.mp4","created_time":"2020-10-10T17:19:59+00:00","fps":29.97,"size":32299937,"md5":"fcad390159d07049c597c47dd7edc921","public_name":"SD 240p","size_short":"30.8MB"},{"quality":"sd","type":"video\/mp4","width":960,"height":540,"expires":"2021-05-16T10:05:23+00:00","link":"https:\/\/player.vimeo.com\/play\/2073102727?s=466907727_1621159523_03598ebe80a895414613bd3cef32af54&loc=external&context=Vimeo%5CController%5CApi%5CResources%5CUser%5CAlbum%5CVideosController.&download=1&filename=Headache%2BRelief%2Bw%252F%2BRuth165.mp4","created_time":"2020-10-10T17:19:59+00:00","fps":29.97,"size":143540809,"md5":"553cd5d74d4ab59cc16547b486c82a30","public_name":"SD 540p","size_short":"136.89MB"},{"quality":"sd","type":"video\/mp4","width":640,"height":360,"expires":"2021-05-16T10:05:23+00:00","link":"https:\/\/player.vimeo.com\/play\/2073102718?s=466907727_1621159523_613694ef950f06a2a4a06376d9c03708&loc=external&context=Vimeo%5CController%5CApi%5CResources%5CUser%5CAlbum%5CVideosController.&download=1&filename=Headache%2BRelief%2Bw%252F%2BRuth164.mp4","created_time":"2020-10-10T17:19:59+00:00","fps":29.97,"size":56848778,"md5":"282afb947f67e072bfb44b84557ff231","public_name":"SD 360p","size_short":"54.22MB"},{"quality":"hd","type":"video\/mp4","width":1280,"height":720,"expires":"2021-05-16T10:05:23+00:00","link":"https:\/\/player.vimeo.com\/play\/2073102708?s=466907727_1621159523_0d0c2d785bc32949b4eca945a220741a&loc=external&context=Vimeo%5CController%5CApi%5CResources%5CUser%5CAlbum%5CVideosController.&download=1&filename=Headache%2BRelief%2Bw%252F%2BRuth174.mp4","created_time":"2020-10-10T17:19:59+00:00","fps":29.97,"size":244431967,"md5":"8db87793d97332351b77aba3d1e5a042","public_name":"HD 720p","size_short":"233.11MB"}],"status":"available","video_id":"466907727","id":466907727,"human_created_time":"October 10, 2020","thumbnail_tiny":"https:\/\/i.vimeocdn.com\/video\/972886256_295x166?r=pad","thumbnail_tiny_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_295x166&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png","thumbnail_small":"https:\/\/i.vimeocdn.com\/video\/972886256_640x360?r=pad","thumbnail_small_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_640x360&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png","thumbnail_medium":"https:\/\/i.vimeocdn.com\/video\/972886256_1280x720?r=pad","thumbnail_medium_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png","thumbnail_large":"https:\/\/i.vimeocdn.com\/video\/972886256_1280x720?r=pad","thumbnail_large_with_play_button":"https:\/\/i.vimeocdn.com\/filter\/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"},
A simple inlined method within your script template tag should suffice:
:class="
video.tags.reduce((classes, obj) => {
classes.push(obj.canonical)
return classes
}, [])
"
This should be sufficient enough to reduce down the existing array of objects into a simple array of string values.
As for why this happens - in the object syntax for classes, vue looks at the left hand assignment and will apply it if the right hand assignment is truthy. in your case, the indices are applied because the values of them are strings, which are truthy.