javascript - 如何根据 Vue 中的 select 更改输入的占位符

Question

已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。

---

这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

已关闭 3 年前。

Improve this 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

但是您必须使用 == 或 === 而不是 =，如果我们使用 计算的结果会更好 在此处作为占位符

提交

<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 : ''
  }
}

在此示例中，将自动生成占位符。