I want change the placeholder in a template dynamically over the input of a textbox but it not work after change the value. Initial it work perfect.



Working example thanks @Roy J


Example of the component (without the textbox logic)

<customValueComponent :item="config" :value="'ConfigValue1'" />

Code of the customValue component

customValueComponent: {props: {item: {type: Object,required: true},value: {type: String,required: true}},watch: {value: function (newVal, oldVal) { // watch itconsole.log('Prop changed: ', newVal, ' | was: ', oldVal)this.$options.template='<div>{{ item.' + this.value + '}}</div>';}},created: function () {this.$options.template='<div>{{ item.' + this.value + '}}</div>';},template: ''}


var config={ConfigValue1: "Titanium",ConfigValue2: "Gold",ConfigValue3: "Silver",ConfigValue4: "Bronze",ConfigValue5: "Copper",...};

    $options is read-only. This is not how you change values in a template. Vue updates values as they change. Your component definition should be

    Vue.component('customvalue-component', {props: {item: {type: Object,required: true},value: {type: String,required: true,}},template: '<div>{{value}}</div>'});

    And your binding on the component should be

    <customvalue-component :item="config" :value="config[value1]" />
    • I want change the placeholder {{item.ConfigValue1}} or {{item.ConfigValue2}}– live2Feb 13 at 17:34
    • See updated answer.– Roy JFeb 13 at 17:36
    • can you give ma example if the main object is nested, config[value1.x] or config[value1.y] ?– live2Feb 13 at 17:49
    • config[value1].x or config[value1].y. Ordinary JavaScript object indexing. value1 is a string from the input, used as an index.– Roy JFeb 13 at 17:51

    Your Answer


    By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.