使用${}访问vue-model属性

Question

当我使用:src="labels[index]"时，我有一个小片段可以正常工作，但是我的代码正在增长，我需要使用${app.labels[index]}。我可以只加入${app.labels}，但是一旦加入[index]，它就坏了。有人能告诉我怎么把它加到括号里吗?

new Vue({
el: "#app",
data: {
images: [],
labels: [],
form: {
dir: "",
fileItems: [] // An array containing objects of type: {id: number, file: File, dataUrl: [base64 encoded file string], caption: string'}
},
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<div class="image-wrap"><img style="max-height: 430px;" :src="${app.labels[index]}" /></div>
</div>

Answer 1

在Vue中，当你在道具中使用:时，你基本上是在告诉Vue

请将此表达式解释为javascript

一个例子:

<super-aweosme-component :a="1 + 1" />

将导致道具a被2(因为它被解释为javascript)。

当你不在组件道具中使用:时，你在告诉Vue

请将此解释为纯文本

一个例子

<super-aweosme-component a="1 + 1" />

将导致道具a字面上是1 + 1(字符串)。因此，您可以将:src="${images.labels[index]}"更改为:src="images.labels[index]"(当然，应用上述更改)

<标题>除了h1> 有app.labels[index]。app在模板上下文中不存在。在那个上下文中，你有images,labels和form(当然，在那个上下文中有属性，但对这一部分不重要)