vue.js - vue js,如何在模板中传递数组?

标签 vue.js vuejs2

我只想将一个数组或字典传递给 vue 模板:

 Vue.component('step', {

  props: ['data'],
  template: `
      <span> {{data}} {{typeof(data)}}</span>
  `
})

在 html 中:

 <div id="app">
     <step data="['tefdfxt', 'Cats']"></step>
 </div>

被评估为一个字符串,而它应该是一个数组:

  ['tefdfxt', 'Cats'] string

我的问题是:如何以不作为字符串序列求值的方式在 html 属性中传递数组?文档对我没有帮助。 当然,我尝试了 {{}},以及所有的解析器调用。没用。始终评估为字符串。

编辑:

我需要将 v-bind 添加到属性以便被评估为对象: https://forum.vuejs.org/t/how-to-pass-array-in-child-component-as-a-prop/3584

因此将 data="['tefdfxt', 'Cats']" 替换为 v-bind:data="['tefdfxt', 'Cats']"

最佳答案

根据您为 future 读者所做的编辑,您应该将 data 替换为 v-bind:data:

<div id="app">
  <step v-bind:data="['tefdfxt', 'Cats']"></step>
</div>

关于vue.js - vue js,如何在模板中传递数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49626971/

相关文章:

webpack - vuejs + babel-loader this.setDynamic 不是函数

vue.js - Nginx try_files 指向错误的文件夹

javascript - 错误表明 queryResult 未定义,即使 queryResult 包含数据

javascript - Vue 3 数据不可回溯

javascript - vue js ajax调用无法读取未定义的属性 'push'

javascript - Vue中如何实现任意两个元素之间的通信?

node.js - 从 Express 服务器以编程方式构建 Nuxt.js 时出错

javascript - 如何为折线图添加渐变背景 [vue-chart.js]

javascript - 如何使用计算函数进行过滤?

javascript - 单击按钮即可下载图像数组