时间戳

首页 > 解决方案 > 使用 ${} 访问 vue-model 属性

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

问题描述

我有一个小片段在我使用时可以正常工作: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>

标签： javascriptvue.js

解决方案

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

请将此表达式解释为 javascript

一个例子：

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

将导致 propa存在2（因为它被解释为 javasript）。

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

请将此解释为纯文本

一个例子

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

将导致道具a字面意思1 + 1（字符串）。所以你可以更改:src="${images.labels[index]}"为 just :src="images.labels[index]"（当然，应用上面提到的更改）

加法

你有app.labels[index]. app在模板上下文中不存在。你在那个上下文中images，labels并且form（当然，在那个上下文中有属性，但对于这部分并不重要）

推荐阅读