根据选择的选择框选项更改占位符

Question

我有一个 select 框，它正在获取一个值如果 select 框中的那个选项被 selected，我希望我的输入得到 select 框的值. 我的意思是动态更改 selected 选项的输入占位符。

Answer 1

像下面的代码片段一样尝试（您可以创建方法并找到选定的选项）：

new Vue({
  el: "#demo",
  data() {
    return {
      text: "",
      selected: null,
      options: [
        { value: null, text: "Please select an option" },
        { value: "a", text: "This is First option" },
        { value: "b", text: "Selected Option" },
        { value: { C: "3PO" }, text: "This is an option with object value" },
        { value: "d", text: "This one is disabled", disabled: true },
      ],
    };
  },
  methods: {
    place() {
      if (this.selected) return this.options.find(o => o.value === this.selected).text
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo" class="container">
    <b-form-select
      v-model="selected"
      :options="options"
      size="sm"
      class="mt-3"
    ></b-form-select>
    <div class="mt-3">
      Selected: <strong>{{ selected }}</strong>
    </div>
    <b-form-input v-model="text" :placeholder="place()"></b-form-input>
    <div class="mt-2">Value: {{ text }}</div>
  </div>

根据选择的选择框选项更改占位符

Changing placeholder depending on which selectbox option is selected

javascript

vue.js

vuejs2

nuxt.js