Home Vue.js Change placeholder in template dynamically
Reply: 1

Vue.js Change placeholder in template dynamically

live2
1#
live2 Published in 2018-02-13 17:08:55Z

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 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",
    ...
};
Roy J
2#
Roy J Reply to 2018-02-13 17:36:16Z

$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]" />
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.392807 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO