如何显示<v-text-field>的动态占位符文本?

时间:2018-10-24 11:39:28

标签: javascript vue.js ecmascript-6 vuetify.js

文本字段有点像这样:

<v-text-field v-model="input" placeholder="(0 - 200)">
</v-text-field>

Vue.js data包含:

export default {
data () {
    return {
        input: '',
        proposed: 0  
        }
    }
}

我希望占位符显示如下内容:

placeholder="Proposed quantity: 2 (0 - 200)"

尝试通过以下方式设置proposed变量:

a) placeholder="Proposed quantity: {proposed} (0 - 200)"
b) placeholder="Proposed quantity: `${proposed}` (0 - 200)"
c) placeholder="Proposed quantity: " + proposed + " (0 - 200)"

没有一个起作用。

还有其他想法和建议吗?

1 个答案:

答案 0 :(得分:2)

您必须使用placeholder:v-bind:placeholder ...绑定到数据对象,如:

  :placeholder="'Proposed quantity: '+proposed+ ' (0 - 200)'"

  v-bind:placeholder="'Proposed quantity: '+proposed+ ' (0 - 200)'"