如何在占位符或值中放置字符串以外的内容（vue 属性）

Question

我正在创建一个带有 nuxt 和 pug/jade 的 CMS，我想高效地为用户制作一个输入列表，供 post 中的信息使用。我想用 v-for 渲染列表，然后用 items.

中每个 item 的属性添加一个值和占位符

这是我试过的：

li(v-for="item in items" :key="item.message")
  input(type="text" placeholder="item.message" value="item.message")

data() {
    return {
      items: [
        { message: 'Voornaam' },
        { message: 'Tussenvoegsel' },
        { message: 'Achternaam' },
        { message: 'Telefoonnummer' },
        { message: 'E-mailadres' },
        { message: 'NSP nbr.' },
        { message: 'Type pers' },
        { message: 'Bedrijf' },
        { message: 'Publiceert bij' }
      ]
    } 
  }

目前它们只是变成 item.message 的文字字符串，而不是 .e.g. value="Voornaam" placeholder="Voornaam"

Answer 1

您应该使用 v-bind: 或 : 将属性绑定到该字段：

 input(type="text" :placeholder="item.message" :value="item.message")

如何在占位符或值中放置字符串以外的内容（vue 属性）

How to put something other than a string in a placeholder or value (a vue property)

html

input

vue.js

pug

nuxt.js