如何根据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">

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

</select>

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

data() {

  return {

    platform: '',

    options: [

      { text: 'PSN', value: 'psn', placeholder: 'Enter PSN ID' },

      { text: 'Xbox Live', value: 'xbl', placeholder: 'Enter Origin ID' },

      { text: 'Origin', value: 'origin', placeholder: 'Enter Xbox Live Gamertag' }

    ]

  }

},

computed: {

  placeholder() {

    let selected = this.options.find(o => o.value === this.platform)

    return selected ? selected.placeholder : ''

  }

}

在本例中，placeholder将自动生成。