如何根据Vue中的选择更改输入的占位符

Question

我想根据 select onchange 方法更改输入的占位符。我认为有什么不对。我无法选择该选项，它一直锁定 Xbox Live 选项。这是我的代码如下：

<select class="form-control" id="platform" @change="onChange" v-model="platform">

     <option v-for="option in options" :value="option.value">{{ option.text }}</option>

</select>

<input type="text" class="form-control" :placeholder="placeholder">

这是我的Vue代码：

data() {

        return { 

            placeholder: '',

            platform: '',

            options: [

                { text: 'PSN', value: 'psn' },

                { text: 'Xbox Live', value: 'xbl' },

                { text: 'Origin', value: 'origin' }

            ]

        }

    },

    methods: {

        onChange() {

            if(this.platform = 'psn') this.placeholder = 'Enter PSN ID'

            if(this.platform = 'origin') this.placeholder = 'Enter Origin ID'

            if(this.platform = 'xbl') this.placeholder = 'Enter Xbox Live Gamertag'

        }

    }

所以我想要的是当我选择PSN占位符更改为Enter PSN ID等等。

Answer 1

但是，您必须使用==或===代替=，如果我们computed在此处使用归档作为placeholder<select class="form-control" id="platform" v-model="platform">&nbsp; &nbsp; &nbsp;<option v-for="option in options" :value="option.value">{{ option.text }}</option></select><input type="text" class="form-control" :placeholder="placeholder">data() {&nbsp; return {&nbsp; &nbsp; platform: '',&nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; { text: 'PSN', value: 'psn', placeholder: 'Enter PSN ID' },&nbsp; &nbsp; &nbsp; { text: 'Xbox Live', value: 'xbl', placeholder: 'Enter Origin ID' },&nbsp; &nbsp; &nbsp; { text: 'Origin', value: 'origin', placeholder: 'Enter Xbox Live Gamertag' }&nbsp; &nbsp; ]&nbsp; }},computed: {&nbsp; placeholder() {&nbsp; &nbsp; let selected = this.options.find(o => o.value === this.platform)&nbsp; &nbsp; return selected ? selected.placeholder : ''&nbsp; }}在本例中，placeholder将自动生成。