Wordpress 如何从对象中获取值而不是键以用于vue.js绑定（：class）
我对Vue语法非常陌生，所以请原谅我的术语和假设。简言之，我有一个非常简单的目标，从一个对象中获取值，而当前我正在获取键名 在我试图修改的代码中，有一个名为“tags”的Vue对象，它是完整的“video”对象（从Vimeo返回）的一部分，当在Vue“x-template”脚本中绑定到html时，就像这样：Wordpress 如何从对象中获取值而不是键以用于vue.js绑定（：class）,wordpress,vue.js,vimeo,Wordpress,Vue.js,Vimeo,我对Vue语法非常陌生，所以请原谅我的术语和假设。简言之，我有一个非常简单的目标，从一个对象中获取值，而当前我正在获取键名 在我试图修改的代码中，有一个名为“tags”的Vue对象，它是完整的“video”对象（从Vimeo返回）的一部分，当在Vue“x-template”脚本中绑定到html时，就像这样： <figure class="vimeography-thumbnail" :class="video.tags" > 典型的标记对象
<figure class="vimeography-thumbnail" :class="video.tags" >
"tags":[{"name":"neck massage","canonical":"neckmassage"},{"name":"release","canonical":"release"},{"name":"shoulder pain","canonical":"shoulderpain"}]
“466907727”：{“uri”：“\/videos\/466907727”，“name”：“头痛缓解w\/Ruth”，“description”：“给自己一点时间来做这件事。如果你感到头痛或无法摆脱，试试这些技术来缓解一整天紧张的面部、下巴和耳朵肌肉。”，“link”：“https:\/\/vimeo.com\/466907727”，“持续时间”：“11:43”，“宽度”：1280，“高度”：720，“嵌入”：{“按钮”：{“喜欢”：真，“watchlater”：真，“共享”：真，“嵌入”：假，“高清”：假，“全屏”：真，“缩放”：真}，“徽标”：{“vimeo”：假，“自定义”：{“活动”：真，“url”：“https:\/\/i.vimeocdn.com\/player\/415649.png？mw=100&mh=100”，“链接”：“https:\/\/\/bodyworksdw.com”，“sticky”：真}，“标题”：“名称”{所有者“：”show“，”肖像“：”hide“，”playbar“，”true“，”speed“，”false“，”color“，”ffffff“，”uri“，”presets“，”120692845“，”html“，”徽章“，”hdr“，”false“，”live“，”直播“，”存档“，”false“，”staff“，”pick“：”，“，”正常“，”false“，”本月最佳“，”false“，”本年度最佳“，”false“，”false“，”假，“首映“，”假“，”vod“，”假“，”周末挑战“，”假“，”创建时间“：”2020-10-10T17:17:42+00:00“，”隐私“：”查看“：”禁用“，”图片“，”uri“：”\/videos\/466907727\/pictures\/972886256“，”活动“：”真“，”类型“：”自定义“，”大小“：”[{”宽度“：100，“高度“：”75，“链接“：”https:\/\/\/i.vimeocdn.com\/video\/972886256\/u 100x75”？r=pad“，”带有“播放”按钮的链接“：”“https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 100x75&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png}，{“宽度”：200，“高度”：150，“链接”：“https:\/\/i.vimeocdn.com\/video\/u 200x150”\r=pad”，“链接带播放按钮”：”https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 200x150&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png“，{“宽度”：295，“高度”：166，“链接”：“https:\/\/i.vimeocdn.com\/video\/972886256\r=pad”，“链接带播放按钮”：”https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 295x166&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png}，{“宽度”：640，“高度”：360，“链接”：“https:\/\/i.vimeocdn.com\/video\/972886360\u 640x360\r=pad”，“链接带播放按钮”：”https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 640x360&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png}，{“宽度”：1280，“高度”：720，“链接”：“https:\/\/i.vimeocdn.com\/video\/u 1280x720”r=pad，“链接带播放按钮”：https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 1280x720&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png}，{“宽度”：1280，“高度”：720，“链接”：“https:\/\/i.vimeocdn.com\/u 1280x720\r=pad”，“链接带播放按钮”：https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 1280x720&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png}，{“宽度”：1280，“高度”：720，“链接”：“https:\/\/i.vimeocdn.com\/u 1280x720\r=pad”，“链接带播放按钮”：https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 1280x720&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png}，{“宽度”：1280，“高度”：720，“链接”：“https:\/\/i.vimeocdn.com\/u 1280x720\r=pad”，“链接带播放按钮”：https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 1280x720&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png}，{“宽度”：1920，“高度”：1080，“链接”：“https:\/\/i.vimeocdn.com\/u 1920x1080”；“带播放按钮的链接”：https:\/\/i.vimeocdn.com\/filter\/overlay？src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F972886256\u 1920x1080&src1=http%3A%2F.vimeocdn.com%2Fp%2Fimages%2Fcrawler\u play.png]，“资源键”：“0e088692aa74f2e89587bd88f8aed98a1faa1ccb9”，“默认图片”：false}，“标签”：“{”名称“：”下巴“，”下巴“，”下巴“，”下巴“，”头“，”头“，”头“，”头“，”头“{头“，”头“，”头“，”头“{头“，”“，”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\/207310277_1621159523_101bba513873dd67b93c563f09e28890&loc=external&context=vimeo%5CController%5CApi%5CResources%5CUser%5CAlbum%5cVideoscocontroller.&download=1&filename=header%2Bw%252F%2BRuth139.mp4”，“创建时间”：“2020-10-10T17:19:59+00:00”，“fps”：29.97，“大小”：32299937，“创建时间”：”fcad390159d07049c597c47dd7edc921，“公共名称”：“SD 240p”，“大小缩写”：“30.8MB”），{“质量”：“SD”，“类型”：“视频\/mp4”，“宽度”：960，“高度”：540，“过期”：“2021-05-16T10:05:23+00:00”，“链接”：https:\/\/player.vimeo.com\/play\/2073102727？s=466907727\u 1621159523\u 03598ebe80a895414613bd3cef32af54&loc=external&context=vimeo%5cefcontroller%5CApi%5ccources%5ccuser%5CAlbum%5cVideoscocontroller.&download=1&filename=header%2Bw%252F%2BRuth165.mp4，“创建时间”：“2020-10-10T17:19:59+00:00”，“fps”：29.97，“大小”：1435
<figure data-v-de73d604 data-v-5a40afb8 class="vimeography-thumbnail hands feet eyes" index="18">
<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"}]
<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
}, [])
"