如何从对象中获取值而不是键以用于 vue.js 绑定 (:class)
How do I get values instead of keys from object for use with vue.js binding (:class)
我对 Vue 语法还很陌生，所以请原谅我（并随时纠正！）我的术语和假设。简而言之，我有一个非常简单的目标，即从当前正在获取键名的对象中获取值。
在我尝试修改的代码中，有一个名为“标签”的 Vue 对象，是完整“视频”对象的一部分（return来自 Vimeo），当绑定到 Vue 中时html 的“x-template”脚本 - 像这样：
<figure class="vimeography-thumbnail" :class="video.tags" >
...产生这样的输出：
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail name canonical name canonical name canonical" index="18">
我们需要的输出看起来更像这样：
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail hands feet eyes" index="18">
换句话说，“手”、“脚”和“眼睛”将是三个“标签”集合的“规范”值。我认为输出的“数据”和“索引”元素是无关紧要的。
我通过一些调查黑客攻击得到了尽可能多的结果，虽然结果是错误的，但我可以从页面源代码中看到“名称”和“规范”是正确的键名，我的值还存在需求，并且每个视频缩略图的键对数量与给定每个特定 Vimeo 视频的标签数量所预期的一样。
我确实看到很多关于遍历对象（或者它真的是一个数组？）的讨论，但是 :class shorthand 似乎已经在这样做了，所以我想知道是否没有一种简单的 shorthand 方法来获取值而不是键。我尝试了 video.tags.values 和 video.tags[canonical] 只是为了它，但没有运气。
只是为了提供更大的上下文，该脚本是 WordPress 插件 - Vimeography - 的模板自定义脚本，它已经完成了从 Vimeo API.[=21= 构建所需变量的工作。 ]
较大的模板 - 用于修改图库缩略图 - 如下所示：
<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>
典型的标签对象在页面源代码中如下所示：
"tags":[{"name":"neck massage","canonical":"neckmassage"},{"name":"release","canonical":"release"},{"name":"shoulder pain","canonical":"shoulderpain"}]
因此，如您所见，如果您 return 到上面的输出示例，我将按顺序获取第一个和第二个键名称“name”和“canonical”，以空格分隔，什么时候我需要的是每个秒键值。
根据要求 - 一个视频对象 - “标签”出现在它的中间位置。
"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"},
无法准确解决你的问题，如果你想像你一样打印它的 属性 名称“.name”调用它的值，但你必须确保视频是一个单一的对象.
<figure
v-for="(item, index) in tags"
:v-key="index"
data-v-de73d604
data-v-5a40afb8
:class="item.name + item.canonical"
class="vimeography-thumbnail"
:index="18 + index"
></figure>
带有标签数组
<template>
<div id="app">
<!-- ..-->
<figure
v-for="(item, index) in tags"
:v-key="index"
data-v-de73d604
data-v-5a40afb8
:class="item.name + ' ' + item.canonical"
class="vimeography-thumbnail"
:index="18 + index"
></figure>
<!-- ..-->
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
data() {
return {
tags: [
{ name: "neck massage", canonical: "neckmassage" },
{ name: "release", canonical: "release" },
{ name: "shoulder pain", canonical: "shoulderpain" },
],
};
},
};
</script>
//新更新
<template>
<div id="app">
{{ video.tags }}
<figure
v-for="(item, index) in video.tags"
:v-key="index"
data-v-de73d604
data-v-5a40afb8
:class="item.name + ' ' + item.canonical"
class="vimeography-thumbnail"
:index="18 + index"
></figure>
</div>
</template>
<script>
export default {
mounted(){
var get = {
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",
},
};
// here we check if the getting data is array or object and make it okay to video object.
get == Array.isArray()
? (this.video = get[0])
: (this.video = get[Object.keys(get)]);
},
data(){
return{
video:{
}
}
}
}
</script>
脚本模板标记中的一个简单内联方法就足够了：
:class="
video.tags.reduce((classes, obj) => {
classes.push(obj.canonical)
return classes
}, [])
"
这应该足以将现有的对象数组缩减为一个简单的字符串值数组。
至于为什么会发生这种情况 - 在 类 的对象语法中，vue 查看左侧赋值，如果右侧赋值为真，则应用它。在你的例子中，应用了索引，因为它们的值是字符串，是真实的。
我对 Vue 语法还很陌生，所以请原谅我（并随时纠正！）我的术语和假设。简而言之，我有一个非常简单的目标，即从当前正在获取键名的对象中获取值。
在我尝试修改的代码中，有一个名为“标签”的 Vue 对象，是完整“视频”对象的一部分（return来自 Vimeo），当绑定到 Vue 中时html 的“x-template”脚本 - 像这样：
<figure class="vimeography-thumbnail" :class="video.tags" >
...产生这样的输出：
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail name canonical name canonical name canonical" index="18">
我们需要的输出看起来更像这样：
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail hands feet eyes" index="18">
换句话说，“手”、“脚”和“眼睛”将是三个“标签”集合的“规范”值。我认为输出的“数据”和“索引”元素是无关紧要的。
我通过一些调查黑客攻击得到了尽可能多的结果，虽然结果是错误的，但我可以从页面源代码中看到“名称”和“规范”是正确的键名，我的值还存在需求，并且每个视频缩略图的键对数量与给定每个特定 Vimeo 视频的标签数量所预期的一样。
我确实看到很多关于遍历对象（或者它真的是一个数组？）的讨论，但是 :class shorthand 似乎已经在这样做了，所以我想知道是否没有一种简单的 shorthand 方法来获取值而不是键。我尝试了 video.tags.values 和 video.tags[canonical] 只是为了它，但没有运气。
只是为了提供更大的上下文，该脚本是 WordPress 插件 - Vimeography - 的模板自定义脚本，它已经完成了从 Vimeo API.[=21= 构建所需变量的工作。 ]
较大的模板 - 用于修改图库缩略图 - 如下所示：
<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>
典型的标签对象在页面源代码中如下所示：
"tags":[{"name":"neck massage","canonical":"neckmassage"},{"name":"release","canonical":"release"},{"name":"shoulder pain","canonical":"shoulderpain"}]
因此，如您所见，如果您 return 到上面的输出示例，我将按顺序获取第一个和第二个键名称“name”和“canonical”，以空格分隔，什么时候我需要的是每个秒键值。
根据要求 - 一个视频对象 - “标签”出现在它的中间位置。
"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"},
无法准确解决你的问题，如果你想像你一样打印它的 属性 名称“.name”调用它的值，但你必须确保视频是一个单一的对象.
<figure
v-for="(item, index) in tags"
:v-key="index"
data-v-de73d604
data-v-5a40afb8
:class="item.name + item.canonical"
class="vimeography-thumbnail"
:index="18 + index"
></figure>
带有标签数组
<template>
<div id="app">
<!-- ..-->
<figure
v-for="(item, index) in tags"
:v-key="index"
data-v-de73d604
data-v-5a40afb8
:class="item.name + ' ' + item.canonical"
class="vimeography-thumbnail"
:index="18 + index"
></figure>
<!-- ..-->
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
data() {
return {
tags: [
{ name: "neck massage", canonical: "neckmassage" },
{ name: "release", canonical: "release" },
{ name: "shoulder pain", canonical: "shoulderpain" },
],
};
},
};
</script>
//新更新
<template>
<div id="app">
{{ video.tags }}
<figure
v-for="(item, index) in video.tags"
:v-key="index"
data-v-de73d604
data-v-5a40afb8
:class="item.name + ' ' + item.canonical"
class="vimeography-thumbnail"
:index="18 + index"
></figure>
</div>
</template>
<script>
export default {
mounted(){
var get = {
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",
},
};
// here we check if the getting data is array or object and make it okay to video object.
get == Array.isArray()
? (this.video = get[0])
: (this.video = get[Object.keys(get)]);
},
data(){
return{
video:{
}
}
}
}
</script>
脚本模板标记中的一个简单内联方法就足够了：
:class="
video.tags.reduce((classes, obj) => {
classes.push(obj.canonical)
return classes
}, [])
"
这应该足以将现有的对象数组缩减为一个简单的字符串值数组。
至于为什么会发生这种情况 - 在 类 的对象语法中，vue 查看左侧赋值，如果右侧赋值为真，则应用它。在你的例子中，应用了索引，因为它们的值是字符串，是真实的。