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

Vue.js Change placeholder in template dynamically

user1404
1#
user1404 Published in May 27, 2018, 3:35 am

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",
    ...
};
You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO