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.

Demo

https://jsfiddle.net/he4gx40g/

Working example thanks @Roy J

https://jsfiddle.net/jadkLtc3/

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: ''}

Object

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

    $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]" />
    share|improve this answer
    • 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

     
    discard

    By posting your answer, you agree to the privacy policy and terms of service.

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