CODEWITHSUNDEEP
templatesdynamicvue.jsvuejs2
live2
live2

Reputation: 4295

Vue.js Change placeholder in template dynamically

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/

Update: Working example thanks @Roy J

https://jsfiddle.net/z3gbk0L2/

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 it
            console.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",
    ...
};

Upvotes: 0

Views: 2440

Answers (1)

Roy J
Roy J

Reputation: 43899

$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]" />

Upvotes: 1

Related Questions