Soy muy nuevo en la sintaxis de Vue, así que discúlpeme (¡y siéntase libre de corregir!) mi terminología y suposiciones. En resumen, tengo un objetivo muy simple: obtener valores de un objeto donde actualmente obtengo nombres clave.
En el código que estoy tratando de modificar, hay un objeto Vue llamado “etiquetas”, parte de un objeto de “video” completo (devuelto de Vimeo), que, cuando se vincula en un script Vue “x-template” a html – como entonces:
<figure class="vimeography-thumbnail" :class="video.tags" >
… produce una salida como esta:
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail name canonical name canonical name canonical" index="18">
La salida que necesitamos en su lugar se parecería más a esto:
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail hands feet eyes" index="18">
En otras palabras, “manos”, “pies” y “ojos” serían los valores de “canónico” para el conjunto de tres “etiquetas”. Los elementos de “datos” e “índice” que se emiten son, creo, irrelevantes.
Llegué tan lejos como lo hice a través de algunos intentos de investigación y, aunque el resultado es incorrecto, puedo ver en la fuente de la página que “name” y “canonical” son los nombres de clave correctos, que los valores que necesito también están presentes, y que la cantidad de pares de claves para cada miniatura de video es la esperada dada la cantidad de etiquetas de cada video específico de Vimeo.
Veo mucha discusión sobre iterar sobre el objeto (¿o es realmente una matriz?), Pero el :class taquigrafía parece que ya está haciendo eso, por lo que me pregunto si no hay una forma simple de taquigrafía para obtener los valores en lugar de las claves. Lo intenté video.tags.values y video.tags[canonical]solo por el gusto de hacerlo, pero sin suerte.
Solo para proporcionar un contexto más amplio, el script es un script de personalización de plantilla para un complemento de WordPress, Vimeography, que ya ha hecho el trabajo de construir las variables necesarias desde la API de Vimeo.
La plantilla más grande, para modificar las miniaturas de la galería, se ve así:
<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>
Un objeto de etiquetas típico se ve así en la fuente de la página:
"tags":[{"name":"neck massage","canonical":"neckmassage"},{"name":"release","canonical":"release"},{"name":"shoulder pain","canonical":"shoulderpain"}]
Entonces, como puede ver si regresa al ejemplo de salida anterior, obtengo los nombres de la primera y segunda clave “nombre” y “canónico” en secuencia, separados por espacios, cuando lo que necesito es cada segundo valor clave.
A pedido, un objeto de video, las “etiquetas” aparecen a mitad de camino.
"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"},
.